Skip to main content

CSS Keyframe Animations (Live Playground)

Keyframe animations are an essential tool in web development, allowing you to create more complex and dynamic animations compared to CSS transitions. In this tutorial, you will learn how to create CSS keyframe animations for a more dynamic user experience, with sample code and simple explanations.

@keyframes Rule​

The @keyframes rule is used to define the animation and its keyframes (the points at which the animation changes). The keyframes are defined using percentages, where 0% represents the start of the animation and 100% represents the end.

Example:

CSS
@keyframes changeBackgroundColor {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

animation-name​

The animation-name property is used to specify the name of the animation you want to apply to an element.

Example:

CSS
div {
  animation-name: changeBackgroundColor;
}

animation-duration​

The animation-duration property sets the duration of the animation, usually in seconds (s) or milliseconds (ms).

Example:

CSS
div {
  animation-name: changeBackgroundColor;
  animation-duration: 3s;
}

animation-timing-function​

The animation-timing-function property specifies the speed curve of the animation effect, controlling how the animation progresses over time. Common values include linear, ease, ease-in, ease-out, and ease-in-out.

Example:

CSS
div {
  animation-name: changeBackgroundColor;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
}

animation-delay​

The animation-delay property sets a delay before the animation starts, usually in seconds (s) or milliseconds (ms).

Example:

CSS
div {
  animation-name: changeBackgroundColor;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
}

Shorthand syntax​

You can use the shorthand animation property to set all animation-related properties at once.

Example:

CSS
div {
  animation: changeBackgroundColor 3s ease-in-out 0.5s;
}
Live Playground, Try it Yourself

Conclusion​

By understanding and using CSS keyframe animations, you can create visually appealing designs, enhance the overall appearance of your web pages, and provide a more dynamic and interactive user experience. Keyframe animations can make your website more engaging and accessible, improving user interactions and satisfaction.