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.

ValueDescription
BackgroundIt only transitions the background property
ColorIt only transitions the color property
TransformIt only transitions the transform property
AllIt transitions all the properties
NoneThe 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).

ValueDescription
0sThe transition is instant as the element transitions no property
1.2sIt uses decimal values in seconds with the keyword “s”
2400msIt 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.

ValueDescription
easeIt starts slowly, accelerates in the middle, and slows down at the end
ease-inIt starts slowly, and accelerates gradually until the end
ease-outIt starts quickly, and decelerates gradually until the end
ease-in-outIt starts quickly, and decelerates gradually until the end
linearIt has a *constant speed
step-startIt jumps instantly to the final state
step-endIt 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.

ValueDescription
0sIt will wait zero seconds, and thus start right away
1.2sIt uses decimal values in seconds with the keyword “s”
2400msIt uses decimal values in milliseconds with the keyword “ms”
-500msIt 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>