animation-name Property
The animation-name property specifies the name of the keyframes animation that you want to apply to an element. In CSS, keyframes are defined using the @keyframes rule, which outlines the animation's behavior and style changes at specific points throughout its duration.
Syntax
animation-name: animation1;
Example
@keyframes moveAndChangeColor { } .box { animation-name: moveAndChangeColor; }
In this example, the moveAndChangeColor keyframes animation is assigned to the .box using the animation-name property.
animation-duration Property
The animation-duration property defines the length of time it takes for one cycle of the animation to complete. It is specified in seconds (s) or milliseconds (ms).
Example
animation-duration: 2s;
Example
.box { animation-name: moveAndChangeColor; animation-duration: 5s; }
Here, the animation assigned to .box will complete one cycle in 5 seconds.
animation-name-duration.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Animation Example</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .box { width: 100px; height: 100px; background-color: #3498db; animation-name: moveAndChangeColor; animation-duration: 5s; } /* Defining keyframes */ @keyframes moveAndChangeColor { 0% { transform: translateX(0); background-color: red; } 50% { transform: translateX(150px); background-color: green; } 100% { transform: translateX(300px); background-color: blue; } } </style> </head> <body> <div class="box"></div> </body> </html>
Previous Next Home
No comments:
Post a Comment