CSS Properties: How to Specify the name of the keyframe you want to bind to the selector?
Solution:
HTML Code:
Explanation:
- This HTML document contains a paragraph element with the text "w3resource", a div element, and another paragraph element with the text "Tutorial".
- CSS is used to style the div element, setting its width, height, background color, and position.
- An animation named "move" is applied to the div element using the animation-name property, specifying the name of the keyframe animation.
- The @keyframes rule defines the animation behavior, moving the div from the initial position to 200px to the right over a duration of 8 seconds.
Live Demo:
See the solution in the browser
Supported browser
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | No |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.