The animation-timing-function property in CSS defines the speed curve of an animation. This property specifies how the intermediate states of the animation are calculated. In other words, it controls how the animation progresses through its duration, whether it moves at a constant speed, accelerates, decelerates, or follows a custom speed pattern.
Common Values of animation-timing-function:
1. linear: The animation progresses at a constant speed from start to finish.
2. ease: This is the default value. The animation starts slow, speeds up in the middle, and then slows down again before ending.
3. ease-in: The animation starts slow and gradually speeds up.
4. ease-out: The animation starts fast and then slows down towards the end.
5. ease-in-out: The animation starts slow, speeds up in the middle, and then slows down again before ending.
6. cubic-bezier(n, n, n, n): This allows for a custom cubic Bézier curve to define the animation's speed curve. The values are numbers between 0 and 1.
7. steps(n, [start | end]): This divides the animation into a specific number of equal steps. The start and end keywords define when the steps take effect.
animation-timing-function.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; } .ease { animation-timing-function: ease; } .ease-in { animation-timing-function: ease-in; } .ease-out { animation-timing-function: ease-out; } .ease-in-out { animation-timing-function: ease-in-out; } .cubic-bezier { animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Custom bounce effect */ } @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 class="box ease-out">ease-out</div> <div class="box ease-in-out">ease-in-out</div> <div class="box cubic-bezier">cubic-bezier</div> </div> </body> </html>
No comments:
Post a Comment