CSS Documentation

Animations

Menu

CSS Animations

CSS animations allow you to create smooth, gradual transitions and dynamic effects for web elements without using JavaScript or Flash.

@keyframes Rule

The @keyframes rule specifies the animation code:

@keyframes example {
ㅤfrom { background-color: red; }
ㅤto { background-color: yellow; }
}

Animation Properties

  • animation-name: Specifies the name of the @keyframes animation
  • animation-duration: Defines how long the animation takes to complete one cycle
  • animation-timing-function: Specifies the speed curve of the animation
  • animation-delay: Defines a delay before the animation starts
  • animation-iteration-count: Specifies the number of times the animation should run
  • animation-direction: Defines whether the animation should play in reverse on alternate cycles

Example

Here's an example of using CSS animations:

.box {
ㅤwidth: 100px;
ㅤheight: 100px;
ㅤbackground-color: red;
ㅤanimation-name: example;
ㅤanimation-duration: 4s;
}

@keyframes example {
ㅤ0% { background-color: red; }
ㅤ25% { background-color: yellow; }
ㅤ50% { background-color: blue; }
ㅤ100% { background-color: green; }
}

Best Practices

  • Use animations sparingly and purposefully
  • Keep animations short and snappy for better performance
  • Consider using the animation shorthand property for concise code
  • Test animations across different browsers and devices
  • Use animation-play-state to pause and resume animations

CSS animations are a powerful tool for creating engaging and interactive web experiences without the need for complex JavaScript or external libraries.