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

Last update on February 19 2024 13:01:56 (UTC/GMT +8 hours)

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 the border-top property is animatable</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
#div { /* Defines a CSS rule for an element with the ID 'div' */
width: 300px; /* Sets the width of the element to 300 pixels */
height: 200px; /* Sets the height of the element to 200 pixels */
border: 1px solid red; /* Sets the border of the element to a 1 pixel solid red line */
-webkit-animation: mymove 5s infinite; /* Applies a CSS animation named 'mymove' with a duration of 5 seconds and an infinite repeat count, specifically for WebKit browsers */
animation: mymove 5s infinite; /* Applies a CSS animation named 'mymove' with a duration of 5 seconds and an infinite repeat count */
}
@keyframes mymove { /* Defines a CSS animation named 'mymove' */
50% {border-top: 15px solid #22CF64;} /* Specifies the CSS property 'border-top' to change to a 15 pixel solid border with the color #22CF64 at 50% of the animation duration */
}
</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="div">w3resource Tutorial</div><!-- Displays the text 'w3resource Tutorial' within a div element with the ID 'div' -->
</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 div, setting its width, height, and border properties.
An animation named mymove is defined using @keyframes, specifying that at 50% of the animation duration, the border-top property should change to a 15 pixel solid border with the color #22CF64.
The text "w3resource Tutorial" is displayed within a <div> element with the ID div.
No comments were added below the code line as requested.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page