CSS Properties: How to set animatable border?
Solution:
HTML Code:
Explanation:
- This HTML document demonstrates how to set an animatable border using CSS animations.
- The CSS style block defines a #div selector that applies styles to a <div> element.
- width: 200px; sets the width of the <div> element to 200 pixels.
- height: 100px; sets the height of the <div> element to 100 pixels.
- border: 15px solid coral; sets the border style to solid, width to 15 pixels, and color to coral for the <div> element.
- -webkit-animation: mymove 5s infinite; and animation: mymove 5s infinite; apply animations to the <div> element. The animation mymove lasts for 5 seconds and repeats infinitely.
- @keyframes mymove { ... } defines a keyframe animation named mymove.
- 50% {border-color: blue;} specifies that at 50% of the animation duration, the border color changes to blue.
Live Demo:
See the solution in the browser
Supported browser
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.