transition
Quick Summary for transition
Code Usage for transition
/* Apply to 1 property */ /* property name | duration */ transition: margin-right 4s;  /* property name | duration | delay */ transition: margin-right 4s 1s;  /* property name | duration | easing function */ transition: margin-right 4s ease-in-out;  /* property name | duration | easing function | delay */ transition: margin-right 4s ease-in-out 1s;  /* Apply to 2 properties */ transition: margin-right 4s, color 1s;  /* Apply to all changed properties */ transition: all 0.5s ease-out;  /* Global values */ transition: inherit; transition: initial; transition: revert; transition: unset; 
More Details for transition

transition

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

Constituent properties

This property is a shorthand for the following CSS properties:

transition-delay transition-duration transition-property transition-timing-function

Syntax

/* Apply to 1 property */ /* property name | duration */ transition: margin-right 4s;  /* property name | duration | delay */ transition: margin-right 4s 1s;  /* property name | duration | easing function */ transition: margin-right 4s ease-in-out;  /* property name | duration | easing function | delay */ transition: margin-right 4s ease-in-out 1s;  /* Apply to 2 properties */ transition: margin-right 4s, color 1s;  /* Apply to all changed properties */ transition: all 0.5s ease-out;  /* Global values */ transition: inherit; transition: initial; transition: revert; transition: unset; 

The transition property is specified as one or more single-property transitions, separated by commas.

Each single-property transition describes the transition that should be applied to a single property (or the special values all and none). It includes:

zero or one value representing the property to which the transition should apply. This may be any one of: the keyword none the keyword all a <custom-ident> naming a CSS property. zero or one <easing-function> value representing the easing function to use zero, one, or two <time> values. The first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to transition-delay.

See how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

Formal definition

Initial valueas each of the properties of the shorthand:transition-delay: 0stransition-duration: 0stransition-property: alltransition-timing-function: ease
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Computed valueas each of the properties of the shorthand:transition-delay: as specifiedtransition-duration: as specifiedtransition-property: as specifiedtransition-timing-function: as specified
Animation typediscrete

Formal syntax

<single-transition>#

where <single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>

where <single-transition-property> = all | <custom-ident><easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>

where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)

where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end

Examples

Simple example

This example performs a four-second font size transition with a one-second delay when the user hovers over the element.

HTML
<a class="target">Hover over me</a> 
CSS
.target {   font-size: 14px;   transition: font-size 4s 1s; }  .target:hover {   font-size: 36px; } 

There are several more examples of CSS transitions included in the Using CSS transitions article.

Specifications

Specification
CSS Transitions Level 2 # transition-shorthand-property

See also

Using CSS transitions TransitionEvent

Last modified: Jan 18, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体)正體中文 (繁體) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
When I realized that, no individual step is hard in any process. Building this airport I'm standing in right now started with a guy writing the architectural plans on paper. That's not hard for him to do. Then laying the first beam isn't had. The whole thing is really hard. So, just take each step kind of piece by piece and when I was able to do that and stop trying to chase this prize and started putting in the work, things just started coming together.
Unknown
Random CSS Property

:picture-in-picture

The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.
:picture-in-picture css reference