CSS: Transition

What is CSS Transition

CSS transition lets you have smooth change of CSS values.

Here is a simple example.

Here is HTML code:

<div id="tran82944">mouse hover over me</div>

Here is CSS code:

#tran82944
{
 border:solid thick red;
 width: 50%;
}

#tran82944
{
 transition: width 2s;
 /* when width value changes, do transition, over 2 seconds */
}

#tran82944:hover
{
 width: 100%;
 /* new width value */
 }

The 2s there means a duration of 2 seconds.

Multiple Transitions

You can specify transition for multiple CSS properties. Example:

Here is the CSS code:

#t18476
{
 display:table;
 overflow-wrap: normal;
 border:solid thick red;
 padding:0.5rem;
 text-align:center;

 width:40px;
 height:40px;
 border-radius:0;
 box-shadow:0 0 black;

 transition:width 1s, height 1s, border-radius 1s, box-shadow 1s;
 }

#t18476:hover
{
 width:100px;
 height:100px;
 border-radius:20px;
 box-shadow:20px 20px 20px gray;
 }

Here, we are changing the element's size, border-radius, and box-shadow.

〔see CSS: Box Shadow〕

〔see CSS: Round Corners〕

The syntax is several attributes separated by comma, like this:

transition: width 1s, height 1s, border-radius 1s, box-shadow 1s;

CSS Transition Full Syntax

Here is the full syntax.

transition: spec1, spec2, spec3 …

Each of the spec can have this form:

cssPropertyName duration timingFunction delay

The transition attribute is actually a short form for several other ones:

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

Transition Timing Function

timing_function controls how the value changes over time.

predefined values you can use are:

• ease
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end
• steps(integer, start)
• steps(integer, end)
• cubic-bezier(number, number, number, number)

The default is ease.

Example: Transition Color

mouse hover over the following items.

What is the difference between CSS transition and animation?

CSS animation allows one to control every key frame of animation. You specify the exact CSS properties for each key frame. [see CSS: Animation]

CSS transition just animate between 2 CSS values. You can think of transation as animation with just 2 key frames, the beginning frame and end frame.

What other ways to activate a transition?

Transition is activated when a CSS property's value changes. Currently, the only practical way to start a transition is the pseudo element :hover.

Typically, you use JavaScript to change CSS property, and this will trigger transition.

For example of using JavaScript to trigger transition, see: Fade a Element Using CSS Transition