The @keyframes at-rule in CSS is the cornerstone of creating animations. It allows you to define the various stages and styles of an animation sequence. By specifying CSS styles at different points in the animation's timeline, from 0% (the start) to 100% (the end), you can create smooth and complex visual effects.
Example 1: Simple Color Change
/* style.css */
.box-1 {
width: 100px;
height: 100px;
background-color: red;
/* Apply the animation */
animation-name: color-change;
animation-duration: 4s;
animation-iteration-count: infinite;
}
/* Define the keyframes for the animation */
@keyframes color-change {
from {
background-color: red;
}
to {
background-color: blue;
}
}
Explanation
This code defines an animation named color-change. The .box-1 element will transition its background-color from red to blue over a duration of four seconds, repeating infinitely.
Example 2: Basic Movement
/* style.css */
.box-2 {
width: 100px;
height: 100px;
background-color: green;
position: relative; /* Necessary for positioning */
/* Apply the animation */
animation-name: slide-in;
animation-duration: 2s;
animation-fill-mode: forwards; /* Stays at the end state */
}
/* Define the keyframes for the movement */
@keyframes slide-in {
0% {
left: -100px; /* Starts off-screen to the left */
}
100% {
left: 50px; /* Ends 50px from the left */
}
}
Explanation
The slide-in keyframe moves an element horizontally. The animation starts with the element positioned off-screen to the left (left: -100px) and moves it to a final position of 50px from the left edge of its container.
Example 3: Multi-Step Animation
/* style.css */
.box-3 {
width: 80px;
height: 80px;
background-color: orange;
position: relative;
/* Apply the animation */
animation-name: bounce;
animation-duration: 3s;
animation-timing-function: ease-in-out;
}
/* Define multiple steps in the keyframes */
@keyframes bounce {
0% { top: 0px; }
25% { top: 100px; width: 90px; } /* Goes down */
50% { top: 50px; } /* Bounces back up slightly */
100% { top: 100px; } /* Settles at the bottom */
}
Explanation
This example demonstrates a multi-step animation named bounce. The element moves down, changes width, bounces up slightly, and then settles, creating a more dynamic and complex visual effect than a simple two-step animation.
Example 4: Rotation and Scaling
/* style.css */
.box-4 {
width: 100px;
height: 100px;
background-color: purple;
/* Apply the animation */
animation-name: spin-and-grow;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate; /* Reverses on each cycle */
}
/* Define keyframes for transform properties */
@keyframes spin-and-grow {
from {
transform: rotate(0deg) scale(1);
}
to {
transform: rotate(360deg) scale(1.5);
}
}
Explanation
The spin-and-grow keyframe manipulates the transform property. It animates an element by rotating it a full 360 degrees while simultaneously increasing its size by 50% (scale(1.5)).
Example 5: Combining Multiple Properties
/* style.css */
.box-5 {
width: 120px;
height: 120px;
background-color: #3498db;
border-radius: 50%; /* Makes it a circle */
position: relative;
/* Apply the animation */
animation-name: pulse-effect;
animation-duration: 2s;
animation-iteration-count: infinite;
}
/* Define keyframes animating scale and opacity */
@keyframes pulse-effect {
0% {
transform: scale(0.95);
opacity: 0.7;
}
70% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.95);
opacity: 0.7;
}
}
Explanation
This pulse-effect animation creates a throbbing or pulsing illusion. It simultaneously animates the transform: scale and opacity properties to make the circular element appear to grow and fade in a rhythmic loop.