CSS Transitions & Animations

CSS property transitions allow the appearance and behavior of an element to be altered in multiple ways.

Transition Property

The transition-property determines what properties will be transitioned.

Value Description
Background It only transitions the background property
Color It only transitions the color property
Transform It only transitions the transform property
All It transitions all the properties
None The transition is instant as the element transitions no property

Example:

<!doctype html>  
<html>

    <head>
        <title>...</title>

        <style type="text/css">
            .box {
                background: #2db34a;
                border-radius: 6px
                transition-property: background, border-radius;
                transition-duration: 1s;
                transition-timing-function: linear;
            }
            .box:hover {
                background: #ff7b29;
                border-radius: 50%;
            }
        </style>
    </head>
  
    <body>
        <div class="box">Box</div>
    </body>

</html>

Transition Duration

The transition-duration property set the duration in which a transition takes place. The value of this property can be set using general timing values, including seconds (s) and milliseconds (ms).

Value Description
0s The transition is instant as the element transitions no property
1.2s It uses decimal values in seconds with the keyword "s"
2400ms It uses decimal values in milliseconds with the keyword "ms"

Example:

<!doctype html>  
<html>

    <head>
        <title>...</title>

        <style type="text/css">
            .box {
                background: #2db34a;
                border-radius: 6px;
                transition-property: background, border-radius;
                transition-duration: .2s, 1s;
                transition-timing-function: linear;
            }
            .box:hover {
                background: #ff7b29;
                border-radius: 50%;
            }
        </style>
    </head>
  
    <body>
        <div class="box">Box</div>
    </body>

</html>

Transition Time

The CSS property transition-timing-function is used to set the speed in which a transition will move.

Value Description
ease It starts slowly, accelerates in the middle, and slows down at the end
ease-in It starts slowly, and accelerates gradually until the end
ease-out It starts quickly, and decelerates gradually until the end
ease-in-out It starts quickly, and decelerates gradually until the end
linear It has a *constant speed
step-start It jumps instantly to the final state
step-end It stays at the initial state until the end, when it instantly jumps to the final state

Example:

<!doctype html>  
<html>

    <head>
        <title>...</title>

        <style type="text/css">
            .box {
                background: #2db34a;
                border-radius: 6px;
                transition-property: background, border-radius;
                transition-duration: .2s, 1s;
                transition-timing-function: linear, ease-in;
            }
            .box:hover {
                background: #ff7b29;
                border-radius: 50%;
            }

        </style>
    </head>
  
    <body>
        <div class="box">Box</div>
    </body>

</html>

Transition Delay

CSS transition propert delay sets a time value, seconds or milliseconds, that determines how long a transition will take time before execution.

Value Description
0s It will wait zero seconds, and thus start right away
1.2s It uses decimal values in seconds with the keyword "s"
2400ms It uses decimal values in milliseconds with the keyword "ms"
-500ms It uses negative values so the transition will start as if it had already been playing for 500ms.

Example:

<!doctype html>  
<html>

    <head>
        <title>...</title>

        <style type="text/css">
            .box {
                background: #2db34a;
                border-radius: 6px
                transition-property: background, border-radius;
                transition-duration: .2s, 1s;
                transition-timing-function: linear, ease-in;
                transition-delay: 0s, 1s;
            }
            .box:hover {
                background: #ff7b29;
                border-radius: 50%;
            }

        </style>
    </head>
  
    <body>
        <div class="box">Box</div>
    </body>

</html>