Open In App

Difference between animation and transition in CSS

Improve
Improve
Like Article
Like
Save
Share
Report

CSS transitions allow you to change property values smoothly, but they always need to be triggered like hover. Property changes do not take effect immediately. Over a period of time, the property changes take place.  For example, if you change the color of an element from white to black, the change occurs instantly. The CSS changes occur at time intervals following an acceleration curve which can be customized.

Animations transitioning between two states are called implicit transitions as the states between the start and final states are defined by the browser implicitly.

fig1: Transition starting at a point A and ended at point B with no intermediate point.

CSS animation allows animation of HTML elements, unlike transition which only performs a point A to point B operation but can also make many more operations in between. Animations consist of two steps, the CSS animation defined in stylesheets and a set of keyframes indicating the start and end states of the animation.

fig2: Animation starting at point A ended at B with other Points in between.

Difference between transitions and animations:

Transition Animations
Transitions cannot loop (You can make them do that but they are not designed for that). Animations have no problem in looping.
Transitions need a trigger to run like mouse hover. The animation just start. They don’t need any kind of external trigger source.
Transitions are easy to work in JavaScript. The animations are hard to work in JavaScript. The syntax for manipulating a keyframe and assigning a new value to it, is very complex.
Transitions animate a object from one point to another. Animation allows you to define Keyframes which varies from one state to another with various properties and time frame.
Use transition for manipulating the value using JavaScript.  Flexibility is provided by having multiple keyframes and easy loop.

Example 1: The following example demonstrates the transition effect of changing colour after hover is applied. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            transition: width 2s;
        }
  
        div:hover {
            background: yellow;
        }
    </style>
</head>
  
<body>
    <h1>The transition Property</h1>
  
    <p>
        Hover over the div element below, 
        to see the transition effect:
    </p>
    <div></div>
</body>
  
</html>


Output:

Example 2: The following example demonstrates changing the color using the animation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: example;
            animation-duration: 2s;
        }
  
        @keyframes example {
            0% {
                background-color: red;
            }
  
            50% {
                background-color: blue;
            }
  
            100% {
                background-color: yellow;
            }
        }
    </style>
</head>
  
<body>
    <p>Animation</p>
    <div></div>
</body>
  
</html>


Output:

Changing color using animation



Last Updated : 17 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads