CSS animations make it possible to animate transitions between different styles using keyframes. By defining keyframes, you can specify the start and end states of the animation, as well as any intermediate waypoints.
@keyframes: Defines the animation and its keyframes.animation-name: Specifies the name of the keyframes to be used.animation-duration: Sets the duration of the animation.animation-timing-function: Defines 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 should repeat.animation-direction: Defines whether the animation should play forward, backward, or alternate.This example demonstrates a bounce effect using keyframes:
.animation-example {
width: 150px;
height: 150px;
background-color: #3498db;
margin: 10px;
display: inline-block;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}This example demonstrates a fade effect:
.animation-example-fade {
width: 150px;
height: 150px;
background-color: #e74c3c;
margin: 10px;
display: inline-block;
animation: fade 3s infinite;
}
@keyframes fade {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}This example demonstrates a spinning effect:
.animation-example-spin {
width: 150px;
height: 150px;
background-color: #2ecc71;
margin: 10px;
display: inline-block;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}This example demonstrates a sliding effect:
.animation-example-slide {
width: 150px;
height: 150px;
background-color: #f39c12;
margin: 10px;
display: inline-block;
animation: slide 2s ease-in-out infinite;
}
@keyframes slide {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}This example demonstrates a circle that bounces and moves further with each bounce while reducing speed and distance:
.animation-bouncing-circle {
width: 100px;
height: 100px;
background-color: #9b59b6;
border-radius: 50%;
margin: 10px;
position: relative;
display: inline-block;
animation: bounce-and-move 5s ease-in-out infinite;
}
@keyframes bounce-and-move {
0% {
transform: translateX(0) translateY(0);
animation-timing-function: ease-out;
}
50% {
transform: translateX(200px) translateY(-100px);
animation-timing-function: ease-in;
}
100% {
transform: translateX(400px) translateY(0);
animation-timing-function: ease-out;
}
}