w3resource

CSS Properties: How to set border-top-color is animatable?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type as HTML -->
<html><!-- Root element of the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<title>How to set border-top-color is animatable</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
#mydiv { /* Defines a CSS rule for an element with the id "mydiv" */
width: 200px; /* Sets the width of the element to 200 pixels */
height: 150px; /* Sets the height of the element to 150 pixels */
border: 15px solid #CC63FF; /* Sets the border of the element to 15 pixels solid with the color #CC63FF */
-webkit-animation: mymove 5s infinite; /* Applies a webkit animation named "mymove" with a duration of 5 seconds and infinite iterations */
animation: mymove 5s infinite; /* Applies an animation named "mymove" with a duration of 5 seconds and infinite iterations */
}
@keyframes mymove { /* Defines a keyframe animation named "mymove" */
50% {border-top-color: #22CF64;} /* Specifies the border-top-color property to change to #22CF64 at the 50% keyframe */
}
</style><!-- Ends the CSS style block -->
</head><!-- Ends the head section of the HTML document -->
<body><!-- Contains the content of the HTML document -->
<div id="mydiv">w3resource Tutorial</div><!-- Displays the text 'w3resource Tutorial' within a div element with the id "mydiv" -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->

Explanation:

  • The HTML document structure includes essential elements such as html, head, title, style, and body.
  • A CSS rule is defined for an element with the id "mydiv", specifying its width, height, and border properties.
  • An animation named "mymove" is applied to the element, which changes the color of the top border to #22CF64 at the 50% keyframe.
  • The text "w3resource Tutorial" is displayed within a div element with the id "mydiv".
  • No comments were added below the code line as requested.

Live Demo:

See the Pen border-top-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 No

Go to Exercise page

e 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.