CSS Properties: border-top-width-animatable-answer?

Last update on February 20 2024 12:25:11 (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-width 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 ID "mydiv" */
  width: 100px; /* Sets the width of the element */
  height: 150px; /* Sets the height of the element */
  border: 3px solid #FF0000; /* Sets the border properties */
  padding: 10px 40px; /* Sets the padding of the element */
  background: #00CCCC; /* Sets the background color of the element */
  -webkit-animation: mymove 5s infinite; /* Specifies the animation for WebKit browsers */
  animation: mymove 5s infinite; /* Specifies the animation for all browsers */
}
@keyframes mymove { /* Defines a keyframe animation named "mymove" */
  50% {border-top-width: 50px;} /* Sets the border top-width to 50px at the midpoint of the animation */
}  
</style><!-- Ends the CSS style block -->
</head><!-- Ends the head section of the HTML document -->
<body><!-- Contains the content of the HTML document -->
<h1>w3resource Tutorial</h1><!-- Displays an h1 element with the text "w3resource Tutorial" -->
<div id="mydiv">The border-radius property allow to add rounded corners is animatable</div><!-- Displays a div element with ID "mydiv" and some text content -->
</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.
CSS rules are defined to style an element with ID "mydiv", setting its width, height, border, padding, background color, and specifying an animation.
The @keyframes rule defines a keyframe animation named "mymove" that animates the border top-width property from its initial value to 50px at the 50% mark of the animation duration.
Comments were added below the code line as requested.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page