CSS animations allow you to create dynamic and engaging visual effects on web pages by animating HTML elements. The core of CSS animations is the @keyframes rule, which defines the intermediate steps in an animation sequence. By specifying keyframes, you can control how an element should change throughout the animation.
CSS animations provide a way to transition between different states of an element, enhancing visual appeal and user interaction. They can animate various properties such as color, size, position, and opacity, creating smooth and visually interesting effects.
Keyframes define the specific stages of an animation sequence. They are used to describe how the CSS properties of an element should change over time. Keyframes allow you to set the intermediate steps in an animation and how an element should look at each of these steps.
@keyframes animation-name {
from {
/* Starting state */
}
to {
/* Ending state */
}
}
You can also specify multiple intermediate steps:
@keyframes animation-name {
0% {
/* Initial state */
}
50% {
/* Midpoint state */
}
100% {
/* Final state */
}
}
• @keyframes Rule: Defines the animation sequence.
• animation-name: Specifies the name of the @keyframes animation.
• animation-duration: Defines the length of time the animation takes to complete one cycle.
• animation-timing-function: Sets the speed curve of the animation.
• animation-delay: Specifies a delay before the animation starts.
• animation-iteration-count: Sets the number of times the animation will repeat.
• animation-direction: Determines whether the animation should play forwards, backwards, or alternate between these directions.
<!DOCTYPE html>
<html>
<head>
<style>
.animate {
width: 100px;
height: 100px;
background-color: blue;
animation-name: colorChange, moveRight;
animation-duration: 2s, 2s;
animation-timing-function: ease-in-out, ease-in-out;
animation-iteration-count: infinite, infinite;
}
@keyframes colorChange {
0% { background-color: blue; }
50% { background-color: red; }
100% { background-color: blue; }
}
@keyframes moveRight {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<div class="animate"></div>
</body>
</html>
• @keyframes colorChange: Changes the background color of the element from blue to red and back to blue.
• @keyframes moveRight: Moves the element horizontally from its original position to 200px to the right and back.
• animation-name specifies the animations to apply (colorChange and moveRight).
• animation-duration sets each animation to last 2 seconds.
• animation-timing-function controls the speed curve.
• animation-iteration-count makes the animations repeat infinitely.