8.1 Property animation-iteration-count
CSS animations let you create dynamic visual effects, making user interfaces more engaging. Now we'll look at two key properties that control animation loops: animation-iteration-count and animation-direction.
The animation-iteration-count property specifies how many times the animation will play. This property lets you control whether the animation plays once, several times, or infinitely.
Syntax:
element {
animation-iteration-count: number | infinite;
}
Where:
number: number of times the animation plays (e.g., 1, 2, 3, etc.)infinite: the animation will play infinitely
Example:
<div class="box"></div>
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Code Explanation:
@keyframes bounce: defines an animation that moves the element up and returns it to its original positionanimation-iteration-count: infinite: sets the animation to play infinitely
8.2 Property animation-direction
The animation-direction property defines the playback direction of the animation. It lets you specify whether the animation plays in a forward direction, a reverse direction, or alternates between both.
Syntax:
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Where:
normal: the animation plays in a forward direction (default)reverse: the animation plays in a reverse directionalternate: the animation alternates between forward and reverse directionsalternate-reverse: the animation starts in reverse and then alternates between reverse and forward directions
Example
Forward and reverse playback:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: normal;
}
.box2 {
animation-direction: reverse;
}
Code Explanation:
.box1: the animation plays in a forward direction.box2: the animation plays in a reverse direction
Alternating directions:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: alternate;
}
.box2 {
animation-direction: alternate-reverse;
}
Code Explanation:
.box1: the animation alternates between forward and reverse directions.box2: the animation starts in reverse and alternates between reverse and forward directions
8.3 Example Using Both Properties
Swiveling Element
- This example demonstrates a swiveling element that moves right and left:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiveling Element</title>
<style>
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: swing 1s infinite alternate-reverse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code Explanation:
@keyframes swing: defines an animation that rotates the element.box: element with theswinganimation applied, duration of 1 second, infinite playback, starting in reverse direction
GO TO FULL VERSION