The animation-direction property in CSS is used to specify the direction in which an animation should be played. It can control whether the animation runs forwards, backwards, or alternates between the two. This property is particularly useful when combined with other animation properties to create more complex and dynamic visual effects.
Here are the possible values for animation-direction.
1. normal: The animation is played in the default forward direction from start to finish.
2. reverse: The animation is played in reverse, starting from the end to the beginning.
3. alternate: The animation alternates direction on each cycle, going forwards first, then backwards.
4. alternate-reverse: Similar to alternate, but the animation starts in the reverse direction first.
animation-direction.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-name: moveRight; animation-duration: 5s; animation-iteration-count: 3; } .normal { animation-direction : normal; } .reverse { animation-direction : reverse; } .alternate { animation-direction : alternate; } .alternate-reverse { animation-direction : alternate-reverse; } @keyframes moveRight { from { transform: translateX(0); } to { transform: translateX(500px); } } </style> </head> <body> <div class="container"> <div class="box normal">normal</div> <div class="box reverse">reverse</div> <div class="box alternate">alternate</div> <div class="box alternate-reverse">alternate-reverse</div> </div> </body> </html>
Previous Next Home
No comments:
Post a Comment