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:
Live Demo:
See the Pen border-animatable-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4