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

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set the border-left property is animatable</title><!-- Title of the HTML document -->
<style>
/* CSS styling */
#div {
  width: 300px; /* Sets the width of the div element */
  height: 200px; /* Sets the height of the div element */
  border: 1px solid red; /* Sets a 1px solid red border for the div element */
  -webkit-animation: mymove 5s infinite; /* Applies the "mymove" animation for WebKit browsers */
  animation: mymove 5s infinite; /* Applies the "mymove" animation for all other browsers */
}
@keyframes mymove { /* Defines the keyframes for the "mymove" animation */
  50% {
    border-left: 15px solid #CC63FF; /* At 50% of the animation duration, changes the left border to 15px solid #CC63FF */
  }
}
</style>
</head>
<body>
<div id="div">w3resource Tutorial</div><!-- The div element with the specified properties and animation -->
</body>
</html>

Explanation:

This HTML document demonstrates how to animate the border-left property of a div element.
The div element with id "div" has a width of 300px, height of 200px, and a 1px solid red border.
An animation named "mymove" is defined using @keyframes.
During the animation, at 50% of the duration, the left border of the div element changes to 15px solid #CC63FF.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page