Skip to main content

Introduction to CSS Animations

CSS Animations​

CSS Animations allow you to animate HTML elements and create dynamic visual effects on a webpage without having to use JavaScript or any other scripting language. Animations can be triggered by user interaction or they can start automatically when the page loads.

Here are some key concepts related to CSS animations:

  • Keyframes: CSS Animations are defined using keyframes. Keyframes define the starting and ending points of the animation, as well as any intermediate steps.

  • Animation properties: CSS Animations use a set of properties that define the duration, timing function, and other aspects of the animation.

  • Animation types: There are several types of CSS Animations, including transitions, transforms, and keyframe animations. Each type has its own set of properties and use cases.

  • Animation performance: Animations can be resource-intensive, so it's important to optimize their performance. This can be done by using hardware acceleration, reducing the number of elements being animated, and minimizing the amount of DOM manipulation required.

  • Browser support: CSS Animations are supported by all modern browsers, but some older browsers may not support all features. It's important to test animations in different browsers to ensure they work correctly.

The CSS Animation Property​

The CSS animation property allows you to create animations on HTML elements. It specifies a set of keyframes, which describe the state of the element at various points during the animation, and the duration and timing of the animation

  • @keyframes: This rule specifies the animation sequence by defining keyframes during the animation. It allows you to define what the animation should look like at different points in time.

  • animation-name: This property specifies the name of the animation you want to apply to an element. The name must match the name defined in the @keyframes rule.

  • animation-duration: This property specifies the length of time it takes for the animation to complete one cycle. It is usually measured in seconds or milliseconds.

  • animation-delay: This property specifies the length of time to wait before starting the animation. It is also measured in seconds or milliseconds.

  • animation-iteration-count: This property specifies the number of times the animation should be played. You can use a number or the infinite keyword for an infinite number of times.

  • animation-direction: This property specifies the direction of the animation. You can set it to normal (default), reverse, alternate, or alternate-reverse.

  • animation-timing-function: This property specifies the speed curve of the animation. It allows you to control how fast or slow the animation progresses at different points during the animation. You can use predefined timing functions like ease, linear, ease-in, ease-out, and ease-in-out, or you can define your own using the cubic-bezier() function.

  • animation-fill-mode: This property specifies what values are applied to the element before and after the animation. You can set it to none (default), forwards, backwards, or both.

  • animation: This property is a shorthand for all the animation properties listed above. It allows you to specify all the animation properties in one declaration.

The syntax of the animation property is as follows:

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

where:

  • name: the name of the keyframe animation you want to apply to the element
  • duration: the length of time the animation takes to complete (in seconds or milliseconds)
  • timing-function: the speed curve of the animation, for example linear, ease, ease-in, ease-out, ease-in-out, or cubic-bezier()
  • delay: the amount of time to wait before starting the animation (in seconds or milliseconds)
  • iteration-count: the number of times the animation should be played, or infinite for indefinite
  • direction: the direction of the animation, for example normal, reverse, alternate, or alternate-reverse
  • fill-mode: the style applied to the element before and after the animation, for example none, forwards, backwards, or both
  • play-state: the state of the animation, for example running or paused

Example​

Editor

Loading...

In this example:

  • This animation fades a div element in and out continuously, over a duration of 2 seconds, using a linear timing function, starting immediately with no delay, and alternating direction each iteration.
  • The @keyframes rule defines the keyframe animation, which sets the opacity of the element to 1 at the start and end of the animation, and to 0.5 at the halfway point.