6.1 @keyframes Rule
CSS animations let you create complex and smooth visual effects with minimal effort. The main tool for creating animations in CSS is the @keyframes rule, which defines the keyframes of the animation and the changes in styles that should occur at each frame.
The @keyframes rule is used for creating animation by defining changes in CSS properties at different stages of the animation. Keyframes define which styles will be applied at specific moments in time during the animation process.
Syntax 1:
@keyframes animation-name {
from {
/* starting styles */
}
to {
/* final styles */
}
}
Syntax 2:
@keyframes animation-name {
0% {
/* starting styles */
}
100% {
/* final styles */
}
}
Where:
fromcorresponds to0%of the animation timetocorresponds to100%of the animation time
Example: Smooth Background Color Transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Hover over me!</div>
</body>
</html>
Explanation:
- The
@keyframes changeColorrule defines an animation that changes the background color of an element fromlightbluetolightcoral - The
animationproperty on the.animated-boxelement indicates that thechangeColoranimation should last 3 seconds and repeat infinitely
6.2 Multiple Keyframes
You can use more than two keyframes to create more complex animations by defining styles for intermediate states.
Example: Diagonal Movement with Color Change
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Watch me move!</div>
</body>
</html>
Explanation:
The @keyframes moveAndChangeColor rule defines an animation that changes the background color and position of an element in three stages.
- At 0% of the animation time, the element has a light blue color and is in the initial position
- At 50% of the animation time, the element has a light green color and moves 100 pixels to the right and down
- At 100% of the animation time, the element has a light coral color and moves 200 pixels to the right
6.3 Examples of Simple Animations
Example 1: Pulsing
Creating a pulsing effect where an element smoothly expands and contracts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
Explanation:
- The
@keyframes pulserule defines an animation that scales the element up to 120% and returns it to its original size - The
animationproperty on the.pulse-boxelement indicates that thepulseanimation should last 2 seconds and repeat infinitely
Example 2: Rotation
Creating a continuous rotation effect on an element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
Explanation:
- The
@keyframes rotaterule defines an animation that rotates an element from 0 to 360 degrees -
The
animationproperty on the.rotate-boxelement specifies that therotateanimation should last 3 seconds, repeat infinitely, and occur at a constant speed (linear)
GO TO FULL VERSION