What is animation-delay?
The animation-delay property in CSS is used to specify a delay before the start of an animation. This property is helpful when you want to create animations that don't start immediately after the page loads or when you want to sequence multiple animations to play one after another.
Syntax
animation-delay: time;
time: This can be a positive, zero, or negative value. It is defined in seconds (s) or milliseconds (ms). For example, 2s for 2 seconds or 500ms for 500 milliseconds.
How animation-delay Works?
1. Positive Value: If you set animation-delay to a positive value, the animation will start after the specified delay. For example, if you set animation-delay: 2s;, the animation will start 2 seconds after the element has been loaded.
2. Zero Value: Setting animation-delay to 0 means the animation starts immediately. This is the default behavior if animation-delay is not specified.
3. Negative Value: If you set animation-delay to a negative value, the animation will start immediately but will be as if it had already been running for the specified negative duration. This effectively means the animation will jump to a point in its cycle that corresponds to the negative delay.
animation-delay.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animation Timing Function Example</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f4f4f4; } .container { width: 80%; max-width: 800px; margin: 20px; } .box { width: 100px; height: 100px; margin: 20px 0; background-color: #4CAF50; animation: moveRight 5s infinite; } .linear { animation-timing-function: linear; animation-delay: 1s; } .ease { animation-timing-function: ease; animation-delay: 2s; } .ease-in { animation-timing-function: ease-in; animation-delay: 3s; } @keyframes moveRight { from { transform: translateX(0); } to { transform: translateX(500px); } } </style> </head> <body> <div class="container"> <div class="box linear">linear</div> <div class="box ease">ease</div> <div class="box ease-in">ease-in</div> </div> </body> </html>
Previous Next Home
No comments:
Post a Comment