w3resource

CSS Properties: How to set animatable border?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set animatable border</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
#div {
    width: 200px; /* Sets the width of the div element */
    height: 100px; /* Sets the height of the div element */
    border: 15px solid coral; /* Sets the border style, width, and color for the div element */
    -webkit-animation: mymove 5s infinite; /* Sets a webkit animation for the div element */
    animation: mymove 5s infinite; /* Sets a standard animation for the div element */
}
@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 */
}
</style>
</head>
<body>
<div>w3resource HTML5 Tutorial - HTML5 is the fifth revision of HTML, a markup language to present and structure web document.</div><!-- Content inside a div element -->
</body>
</html>

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 Pen border-color-animatable-answer by w3resource (@w3resource) on CodePen.


See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes Yes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.