CSS keyframe animations allow you to create smooth and dynamic animations by specifying a series of keyframes that define how an element should appear at various points during the animation.

Basic CSS Keyframe Animation

Here’s an example of how to create a basic CSS keyframe animation:

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

.box-animation {
    padding: 20px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

<div class="box-animation">
    <h1 class="title">Animation</div>
</div>

In this example, we define an animation called “example” using @keyframes. The animation consists of three keyframes: at 0%, the background color is red; at 50%, it’s yellow; and at 100%, it’s blue.

We then apply this animation to a div element with the class “box-animation“. The animation-name property specifies the name of the animation, and the animation-duration property sets the duration of the animation (in this case, 4 seconds). The animation-iteration-count property specifies how many times the animation should repeat (infinite in this case).

When you run this code, you’ll see a square box that smoothly transitions its background color from red to yellow to blue and then repeats the animation in an infinite loop.

Additional Animation Properties and Transforms

Here’s another example that includes additional animation properties and transforms:

@keyframes transformElement {
    0% { background-color: red; transform: rotate(0); }
    50% { background-color: yellow; transform: rotate(180deg); }
    100% { background-color: blue; transform: rotate(360deg); }
}

/* Apply the animation to an element */
.box-animation-transform {
    width: 120px;
    padding: 10px;
    background-color: red;
    animation-name: transformElement;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-fill-mode: both;
}

<div class="box-animation-transform">
    <p class="title">Animation</p>
</div>

In this example, we’ve added two additional animation properties: animation-delay and animation-fill-mode.

The animation-delay property specifies a delay before the animation starts. In this case, the animation will start after a 2-second delay.

The animation-fill-mode property controls how an element should be styled before and after the animation plays. The value both tells the element to retain the styles defined in the first keyframe (0%) before the animation starts and also to retain the styles defined in the last keyframe (100%) after the animation completes. This ensures that the box remains blue and fully rotated even after the animation finishes.

Additionally, we’ve added the transform property to each keyframe. This allows us to rotate the box at different angles during different stages of the animation. In this case, the box starts at 0 degrees rotation, rotates 180 degrees at 50% of the animation, and completes a full 360-degree rotation at 100%.

You can customize keyframe animations in many ways, including specifying additional keyframes, setting different CSS properties at each keyframe, and using easing functions to control the timing and smoothness of the animation. CSS keyframe animations offer a powerful way to create engaging and interactive effects on your web pages.