Keyframe Animations in CSS

« Prev Next »

Ultimate Guide Keyframe animations are an extension of CSS transitions, and they offer a more advanced method for specifying the intermediate steps of a transition.

In this ultimate guide, we will provide a detailed overview of CSS keyframe animations, including their syntax, examples, and use cases.

 

css-keyframe-animations

Keyframe Animation Syntax

A keyframe animation is made up of two primary components:

 

  • @keyframes rule: This is used to define the keyframes or points at which specific styles will be applied during the animation.
  • animation property: This property is used to apply the animation to an element and to specify its timing, duration, and other properties.

Syntax

@keyframes animation-name {
  0% { /* Starting state */ }
  50% { /* Middle state */ }
  100% { /* Ending state */ }
}

.element {
  animation: animation-name duration timing-function delay iteration-count direction;
}
  • @keyframes animation-name: Specifies the name of the animation.
  • 0%, 50%, 100%: These represent the keyframe percentages (start, middle, and end of the animation). You can define as many keyframes as needed.
  • animation property: Used to specify the animation details.

Example: Simple Keyframe Animation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Keyframe Animation</title>
  <style>
    @keyframes slide {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(300px);
      }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      animation: slide 2s ease-in-out infinite;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
Run ›

Example: Multi-Step Keyframe Animation

You can define multiple keyframes to create more complex animations. Below is an example where an element changes color, rotates, and scales during the animation.

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multi-Step Keyframe Animation</title>
  <style>
    @keyframes complexAnimation {
      0% {
        transform: rotate(0deg) scale(1);
        background-color: #3498db;
      }
      50% {
        transform: rotate(180deg) scale(1.5);
        background-color: #e74c3c;
      }
      100% {
        transform: rotate(360deg) scale(1);
        background-color: #2ecc71;
      }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      animation: complexAnimation 3s ease-in-out infinite;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.