Skip to main content

CSS Animations – How to Animate Transitions between CSS Keyframes

CSS animations provide a smooth and gradual way to animate an element's style changes from one keyframe to another.

Components of CSS Animations​

CSS animations consist of two components:

  1. Keyframes
  2. Animation properties

What Are CSS @keyframes?​

@keyframes define the styles you want browsers to apply smoothly to an element at some specified key moments (frames).

Syntax of CSS @keyframes​

A CSS @keyframes at-rule consists of the following:

  1. An @keyframes keyword
  2. The @keyframes's name
  3. A block of zero or more keyframes
  4. The animation's key moment selector
  5. The key moment's style declarations

Here's an illustration:

Anatomy of CSS @keyframes at-rule

A CSS @keyframes at-rule consists of a keyword, a name, and a block of keyframes

Examples of CSS @keyframes​

Below are examples of the CSS @keyframes.

How to define change-color's keyframes​

@keyframes change-color {
  /* The first keyframe */
  0% {
    background-color: purple;
  }

  /* The last keyframe */
  100% {
    background-color: yellow;
  }
}

Here's what we did in the snippet above:

  1. We created the @keyframes at-rule named change-color.
  2. We defined a keyframe for browsers to apply when an associated element's animation is at its zero percent (0%) duration.
  3. We defined a keyframe for browsers to apply when an associated element's animation is at its one hundred percent (100%) duration.

Note:

  • You can name your @keyframes anything you wish.
  • 0% is equivalent to the keyword from. And 100% is the same as the keyword to. In other words, the snippet above is equal to the following:
@keyframes change-color {
  /* The first keyframe */
  from {
    background-color: purple;
  }

  /* The last keyframe */
  to {
    background-color: yellow;
  }
}
  • An animation's start and end states (from and to) are optional.
  • Suppose you omit an @keyframes's start (0%) or end (100%) state. In that case, browsers will default to the element's existing styles for either state.
  • The important rule (!important) does not work in keyframes. Browsers will ignore any keyframe declaration with an !important rule.

Let's see another example.

How to define shape-image keyframes​

@keyframes shape-image {
  0% {
    width: 40%;
    border: 5px solid blue;
  }
  40% {
    width: 70%;
    border: 1px solid red;
    border-radius: 50%;
  }
  75% {
    width: 50%;
    border: 30px solid green;
  }
  100% {
    width: 100%;
    border: 7px solid purple;
  }
}

Here's what we did in the snippet above:

  1. We created the @keyframes ruleset named shape-image.
  2. We defined four keyframes for browsers to apply when an associated element's animation is at the specified key moments.
tip

Use the CSSKeyframesRule interface in JavaScript to access the CSS @keyframes at-rules.

So, now that we know the CSS @keyframes ruleset, we can discuss the other component of CSS animations—animation properties.

What Are CSS Animation Properties?​

CSS animation properties inform browsers about the animation you wish to apply to a specific element.

In other words, the CSS animation properties describe the animation's attributes, such as its name, duration, direction, and iteration.

The nine (9) types of CSS animation properties are:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode
  • animation

Let's discuss each one now.

What Is the CSS animation-name Property?​

The CSS animation-name property defines the name of the @keyframes at-rules containing the styles you wish to apply to a specific element.

Here's an example:

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
}

@keyframes change-color {
  from {
    background-color: purple;
  }
  to {
    background-color: yellow;
  }
}

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. We created change-color's @keyframes ruleset.
  3. We defined two keyframes for browsers to use when the div element's animation is at its zero percent (0%) and one hundred percent (100%) duration.
tip

You can use the keyword none to deactivate an animation.

What Is the CSS animation-duration Property?​

The CSS animation-duration property defines the time to complete one animation cycle.

Note the following:

  • The animation-duration property must be in milliseconds (ms) or seconds (s) units.
  • animation-duration's value must be zero or positive. Otherwise, browsers will ignore the duration declaration.
  • Zero seconds (0s) is animation-duration's default value.
  • Suppose 0s is animation-duration's value. In that case, browsers will still execute the animation by firing the animationStart and animationEnd events. But the animation-fill-mode's value will determine whether the animation is visible. For instance, if you set the animation-fill-mode to none, the animation will be invisible.

Let's see some examples of the animation-duration property.

How to animate an element's color change within three seconds​

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
  animation-duration: 3s;
}

@keyframes change-color {
  from {
    background-color: purple;
  }
  to {
    background-color: yellow;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. The animation-duration property sets the animation's runtime for one cycle to three seconds (3s).
  3. We created change-color's @keyframes ruleset.
  4. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will create a smooth three-second animation from change-color's first keyframe to its last.

How to animate an image's border and width changes within seven seconds​

img {
  animation-name: shape-image;
  animation-duration: 7s;
}

@keyframes shape-image {
  0% {
    width: 40%;
    border: 5px solid blue;
  }
  40% {
    width: 70%;
    border: 1px solid red;
    border-radius: 50%;
  }
  75% {
    width: 50%;
    border: 30px solid green;
  }
  100% {
    width: 100%;
    border: 7px solid purple;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the img element.
  2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
  3. We created shape-image's @keyframes ruleset.
  4. We defined four keyframes for browsers to apply when the image's animation is at the specified key moments.

Therefore, browsers will create a smooth seven-second animation from shape-image's first keyframe to its last.

What Is the CSS animation-timing-function Property?​

The CSS animation-timing-function property defines an animation's implementation timing (speed) throughout its duration.

In other words, the animation-timing-function property specifies the speed for implementing the animation at various intervals of its duration.

The values the animation-timing-function property accepts are:

  • ease: Starts the animation slowly. Then speeds it up and ends it slowly. ease is the animation-timing-function property's default value. It is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
  • ease-in: Starts the animation slowly with a gradual increase in speed. It is equivalent to cubic-bezier(0.42, 0, 1, 1).
  • ease-out: Start fast and end the animation slowly. It is equivalent to cubic-bezier(0, 0, 0.58, 1).
  • ease-in-out: Start and end the animation slowly. It is equivalent to cubic-bezier(0.42, 0, 0.58, 1).
  • linear: Start and end the animation using a consistent speed throughout the animation's duration. It is equivalent to cubic-bezier(0, 0, 1, 1).
  • cubic-bezier(p1, p2, p3, p4): Allows you to define the values of the cubic-Bezier curve.

Let's see some examples of the animation-timing-function property.

How to animate an element's width change using a linear speed​

div {
  width: 150px;
  height: 150px;
  background-color: purple;
  animation-name: change-width;
  animation-duration: 7s;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {
    width: 50px;
  }
  to {
    width: 100%;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
  3. The linear timing function applied a consistent speed to the div's animation.
  4. We created change-width's @keyframes ruleset.
  5. We defined two keyframes for browsers to apply when the div's animation is at zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will create a smooth seven-second animation from change-width's first keyframe to its last.

Let's see another example.

How to animate an element's width change using an ease-in-out and a linear speed​

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {
    width: 50px;
  }
  to {
    width: 100%;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
  3. We used the ease-in-out timing function to apply a slow start and slow end speed to the first-div's animation.
  4. The linear timing function applied a consistent speed to the second-div's animation.
  5. We created change-width's @keyframes ruleset.
  6. We defined two keyframes for browsers to apply when the div elements' animations are at their zero percent (0%) and one hundred percent (100%) durations.

Therefore, browsers will create a smooth seven-second animation from change-width's first keyframe to its last.

What Is the CSS animation-delay Property?​

The CSS animation-delay property defines how long browsers should wait before starting an animation.

In other words, use animation-delay to specify whether the animation should start immediately from the beginning, immediately from a specific time, or later (after some delay).

Note the following:

  • The animation-delay property must be in milliseconds (ms) or seconds (s) units.
  • 0s is animation-delay's default value. It causes the animation to start once browsers apply it to an HTML element.
  • A negative value causes the animation to start immediately from the specified time. For instance, suppose an element's animation-delay value is -3s. In that case, the animation will begin immediately at 3 seconds.
  • A positive value causes the animation to start after the specified delay time has elapsed. For instance, suppose an element's animation-delay value is 3s. In that case, the animation will begin after a 3-second delay.

Let's see some examples of the animation-delay property.

How to animate an element's width change with a four-second delay​

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
  animation-delay: 4s;
}

@keyframes change-width {
  from {
    width: 50px;
  }
  to {
    width: 100%;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div elements.
  2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
  3. We used the ease-in-out timing function to apply a slow start and slow end speed to the first-div's animation.
  4. The linear timing function applied a consistent speed to the second-div's animation.
  5. The animation-delay property applied a four-second (4s) delay to the starting time of the second-div's animation.
  6. We created change-width's @keyframes ruleset.
  7. We defined two keyframes for browsers to apply when the div elements' animations are at their zero percent (0%) and one hundred percent (100%) durations.

Therefore, browsers will delay the second-div's animation for four seconds while starting the first-div's animation immediately.

Below is another example of the animation-delay property.

How to animate an element's width change from the fourth-second mark of the animation sequence​

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
  animation-delay: -4s;
}

@keyframes change-width {
  from {
    width: 50px;
  }
  to {
    width: 100%;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div elements.
  2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
  3. We used the ease-in-out timing function to apply a slow start and slow end speed to the first-div's animation.
  4. The linear timing function applied a consistent speed to the second-div's animation.
  5. The animation-delay property makes the second-div's animation start from the fourth-second mark of the animation sequence.
  6. We created change-width's @keyframes ruleset.
  7. We defined two keyframes for browsers to apply when the div elements' animations are at their zero percent (0%) and one hundred percent (100%) durations.

Therefore, browsers will start the second-div's animation immediately at the fourth-second mark.

What Is the CSS animation-iteration-count Property?​

The CSS animation-iteration-count property defines the number of times browsers should repeat an animation.

Note the following:

  • 1 is animation-iteration-count's default value.
  • The animation-iteration-count property accepts non-integer values—for instance, 0.5 tells browsers to play half of a single animation cycle.
  • animation-iteration-count does not accept negative values.
  • An infinite value means browsers should repeat the animation forever.

Below are some examples.

How to animate an element's width change with a two-cycle iteration​

div {
  width: 70px;
  height: 50px;
  background-color: purple;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
}

@keyframes change-width {
  from {
    width: 70px;
  }
  to {
    width: 100%;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
  3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
  4. The animation-iteration-count property tells browsers to run the animation twice.
  5. We created change-width's @keyframes ruleset.
  6. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will run the div's animation in two cycles.

Below is another example of the animation-iteration-count property.

How to animate an element's width change with an infinite iteration​

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes change-width {
  from {
    width: 70px;
    background-color: purple;
  }
  to {
    width: 100%;
    background-color: orange;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
  3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
  4. The animation-iteration-count property tells browsers to run the animation infinitely.
  5. We created change-width's @keyframes ruleset.
  6. We defined two keyframes for browsers to apply when the div element's animation is at its zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will run the div's animation infinitely.

What Is the CSS animation-direction Property?​

The CSS animation-direction property specifies whether the animation's first iteration should run forward or backward. It also defines whether browsers should alternate the direction of subsequent iterations.

The values animation-direction accepts are:

  • normal: Play the animation in the normal direction (that is, forward). normal is animation-direction's default value.
  • reverse: Play the animation in the reverse direction (backward).
  • alternate: Play the first animation cycle in the normal direction. Then alternates the subsequent iterations between the backward and forward directions.
  • alternate-reverse: Play the first animation cycle in the reverse direction. Then, alternates the subsequent iterations between the forward and backward directions.

Below are some examples.

How to animate an element's width change while starting each animation cycle backward​

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes change-width {
  from {
    width: 70px;
    background-color: purple;
  }
  to {
    width: 100%;
    background-color: orange;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
  3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
  4. The animation-iteration-count property tells browsers to run the animation infinitely.
  5. The animation-direction property starts each animation cycle in reverse (backward).
  6. We created change-width's @keyframes ruleset.
  7. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Below is another example of the animation-direction property.

How to animate an element's width change while alternating the animation's direction​

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes change-width {
  from {
    width: 70px;
    background-color: purple;
  }
  to {
    width: 100%;
    background-color: orange;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
  3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
  4. The animation-iteration-count property tells browsers to run the animation infinitely.
  5. The animation-direction property alternates the direction of each cycle's animation.
  6. We created change-width's @keyframes ruleset.
  7. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

What Is the CSS animation-play-state Property?​

The CSS animation-play-state property specifies whether the browser is running or has paused a specific animation.

The values the animation-play-state property accepts are:

  • running: Specifies that the browser is running the animation. running is animation-play-state's default value.
  • paused: Specifies that the browser has paused the animation.

Here's an example:

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div:hover {
  animation-play-state: paused;
}

@keyframes change-width {
  from {
    width: 70px;
    background-color: purple;
  }
  to {
    width: 100%;
    background-color: orange;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
  3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
  4. The animation-iteration-count property tells browsers to run the animation infinitely.
  5. The animation-direction property alternates the direction of each cycle's animation.
  6. We used the animation-play-state on the div's hover pseudo-class to pause the animation whenever users move their mouse over the div element.
  7. We created change-width's @keyframes ruleset.
  8. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

What Is the CSS animation-fill-mode Property?​

The CSS animation-fill-mode property defines the styles browsers should apply to an element before (or after) its animation runs.

The values the animation-fill-mode property accepts are:

  • none: Browsers will apply no style to the element before or after the animation runs. none is animation-fill-mode's default value.
  • forwards: The element will retain the last keyframe's style declarations when the animation ends. (Note: The animation-direction and animation-iteration-count determines the last keyframe.)
  • backwards: The element will retain the first keyframe's style declarations during the animation-delay period. (Note: The animation-direction determines the first keyframe.)
  • both: Browsers will apply both the forwards and backwards rules. Therefore, the animation properties will extend in both directions.

Below are some examples.

How to style an element after its animation ends​

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes change-width {
  from {
    width: 70px;
    background-color: purple;
  }
  to {
    width: 100%;
    background-color: orange;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
  3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
  4. The animation-fill-mode property tells browsers to retain the last keyframe's style declarations when the animation ends.
  5. We created change-width's @keyframes ruleset.
  6. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Below is another example of the animation-fill-mode property.

How to style an element during its animation delay period​

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: backwards;
}

@keyframes change-width {
  from {
    width: 70px;
    background-color: purple;
  }
  to {
    width: 100%;
    background-color: orange;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
  3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
  4. The animation-fill-mode property tells browsers to retain the first keyframe's style declarations during the animation-delay period.
  5. We created change-width's @keyframes ruleset.
  6. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Let's see a third example of the animation-fill-mode property.

How to style an element during its animation delay and after the animation​

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: both;
}

@keyframes change-width {
  from {
    width: 70px;
    background-color: purple;
  }
  to {
    width: 100%;
    background-color: orange;
  }
}

Try Editing It

Here's what we did in the snippet above:

  1. The animation-name property specifies the @keyframes we wish to apply to the div element.
  2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
  3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
  4. The animation-fill-mode property tells browsers to apply both the forwards and backwards rules.
  5. We created change-width's @keyframes ruleset.
  6. We defined two keyframes for browsers to use when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

What Is the CSS animation Property?​

We use the animation property as a shorthand for:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode

In other words, instead of writing:

div {
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-play-state: running;
  animation-fill-mode: both;
}

You can alternatively use the animation property to shorten your code like so:

div {
  animation: 5s ease-in-out 2s 3 alternate both running change-width;
}

Try Editing It

Here is the animation property's syntax:

animation: animation-duration animation-timing-function animation-delay
  animation-iteration-count animation-direction animation-fill-mode
  animation-play-state animation-name;

Note the following:

  • The way you arrange the time values is essential. Browsers read the first time-value as animation-duration. And they assign the second one to animation-delay.
  • It is best to list animation-name last. Otherwise, browsers may assign the animation-name's value to other properties.
  • CSS animations are expensive for most CSS properties—except opacity and transform. In other words, applying animations on any CSS box model property is inherently a CPU-intensive task. Therefore, if you are concerned about your page's performance, use animations on only opacity and transform properties.
  • You can apply multiple @keyframes rulesets to an element using the animation property. Here's an example:
div {
  width: 70px;
  height: 70px;
  background-color: green;
  animation: 5s ease-in-out 3s 3 alternate both change-width, 5s 3s infinite
      alternate both change-shape, 5s 3s infinite rotate-hue;
}

@keyframes change-width {
  from {
    width: 70px;
    background-color: purple;
  }
  to {
    width: 100%;
    background-color: orange;
  }
}

@keyframes change-shape {
  from {
    border-radius: 0%;
    border: 1px solid blue;
  }
  to {
    border-radius: 50%;
    border: 7px solid green;
  }
}

@keyframes rotate-hue {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

Try Editing It

The snippet above applied three @keyframes rulesets to the div element using commas (,) to separate each @keyframes's configurations.

note

We used the hue-rotate() function to rotate the div's colors.

Now that you know the animation properties, we can discuss the differences between CSS animations and CSS transitions.

CSS Animations vs. CSS Transitions: What's the Difference?​

Below are five key differences between CSS transitions and CSS animations.

1. What is the purpose of CSS transitions and animations?​

CSS transitions create smooth transitions from one CSS value to another.

CSS animations animate the style change from one CSS keyframe to another.

2. Do CSS transitions and animations need triggers?​

You need triggers to run CSS transitions.

For instance, you can use the :hover pseudo-class to run transitions when a user's pointer hovers over an element.

Alternatively, you can trigger transition effects using JavaScript to add or remove a class.

On the other hand, CSS animations do not need triggers. CSS animations run automatically by default. You can optionally use triggers to make it run only when an element is in a specific state.

3. How many states do CSS transitions and animations have?​

CSS transitions have only two states: an initial and a final state. You cannot create intermediate steps.

CSS animations allow you to create multiple states.

4. Can CSS transitions and animations run multiple times?​

CSS transitions run only once. But you can run multiple CSS animations iterations—even to infinity.

CSS transitions are best used for basic style changes, while CSS animations are suitable for dynamic style changes.

Overview​

This article used examples to discuss how to animate your elements' style changes from one keyframe to another.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter
Tags:
Last updated on by Oluwatobi Sofela