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.