CSS Properties: How to set the border is animatable?

Last update on February 16 2024 13:17:47 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set the border is animatable</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
DIV {
width: 150px; /* Setting width to 150 pixels for <div> elements */
height: 150px; /* Setting height to 150 pixels for <div> elements */
border : 5px dotted coral; /* Setting border properties: width, style, and color */
-webkit-animation: mymove 3s infinite; /* Applying animation to the border using webkit for compatibility */
animation: mymove 5s infinite; /* Applying animation to the border */
 }
@keyframes mymove {
50% {border-color: #CFF63E;} /* Defining keyframes for animation: changing border color to #CFF63E at 50% */
 }
</style>
</head>
<body>
<div id="DIV"><!-- Div element with id "DIV" -->
<h2><em>The border-color is animatable in CSS</em></h2><!-- Heading with emphasized text -->
</div>
</body>
</html>

Explanation:

This HTML document demonstrates how to animate the border color using CSS.
The CSS style block defines styling for the <div> element.
width and height properties are set to 150 pixels for the <div> element.
border property sets the border width, style (dotted), and color (coral) for the <div> element.
Animation is applied to the border color using @keyframes and the mymove animation name.
At 50% of the animation duration, the border color changes to #CFF63E.
The HTML content consists of a <div> element with an <h2> heading containing emphasized text.

Live Demo:

See the Pen border-animatable-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page