| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
The ‘animation-duration‘ property in CSS specifies the length of time that an animation should take to complete one cycle. This property can be used in conjunction with other animation properties such as ‘animation-name‘, ‘animation-timing-function‘, ‘animation-delay‘, and ‘animation-iteration-count‘ to create complex animations.
Syntax
selector {
animation-duration: time;
}
- time: The duration of the animation, which can be specified in seconds (s) or milliseconds (ms).
Example 1: Basic Animation Duration
In this example, we’ll create a simple animation that changes the background color of a ‘<div>‘ element over a duration of 3 seconds.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Duration Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS
/* Define the keyframes for the animation */
@keyframes changeColor {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
100% {
background-color: blue;
}
}
/* Apply the animation to the .box element */
.box {
width: 100px;
height: 100px;
animation-name: changeColor;
animation-duration: 3s; /* Animation will take 3 seconds */
}
In this example, the ‘changeColor‘ animation will transition the background color of the ‘.box‘ element from red to yellow to blue over a period of 3 seconds.
Example 2: Multiple Animations with Different Durations
You can also specify multiple durations for multiple animations.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Animations Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="circle"></div>
</body>
</html>
CSS
/* Define keyframes for two animations */
@keyframes moveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
@keyframes grow {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
/* Apply both animations to the .circle element */
.circle {
width: 50px;
height: 50px;
background-color: green;
border-radius: 50%;
animation-name: moveRight, grow;
animation-duration: 2s, 4s; /* moveRight takes 2 seconds, grow takes 4 seconds */
}
In this example, the ‘.circle‘ element will move to the right over 2 seconds (‘moveRight‘ animation) and simultaneously grow over 4 seconds (‘grow‘ animation).
Example 3: Infinite Animation Duration
You can create an animation that repeats indefinitely by combining ‘animation-duration‘ with ‘animation-iteration-count‘.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Animation Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="infinite-box"></div>
</body>
</html>
CSS
/* Define the keyframes for an infinite animation */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Apply the infinite animation to the .infinite-box element */
.infinite-box {
width: 100px;
height: 100px;
background-color: purple;
animation-name: rotate;
animation-duration: 5s; /* Animation takes 5 seconds */
animation-iteration-count: infinite; /* Repeats indefinitely */
}
In this example, the ‘.infinite-box‘ element will rotate continuously in a 360-degree circle, taking 5 seconds to complete each rotation, and will repeat indefinitely.
The ‘animation-duration‘ property is a key aspect of CSS animations, allowing you to control the length of time an animation takes to complete one cycle. By combining ‘animation-duration‘ with other animation properties, you can create intricate and visually appealing animations for your web pages.
