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

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set border-left-color is animatable</title><!-- Title of the HTML document -->
<style>
/* CSS styling */
#mydiv {
  width: 300px; /* Sets the width of the div element to 300 pixels */
  height: 200px; /* Sets the height of the div element to 200 pixels */
  border: 15px solid #CC63FF; /* Sets the border properties of the div element */
  -webkit-animation: mymove 5s infinite; /* Specifies the WebKit animation for the div element */
  animation: mymove 5s infinite; /* Specifies the animation for the div element */
}
@keyframes mymove { /* Defines the keyframes for the animation named "mymove" */
  50% {border-left-color: #FF63CC;} /* Specifies the border-left-color property for the animation */
}
</style>
</head>
<body>
<div id="mydiv">w3resource Tutorial</div><!-- The div element with the specified border properties -->
</body>
</html>

Explanation:

This HTML document demonstrates how to animate the border-left-color property of an element.
The div with the ID "mydiv" is styled with a width of 300 pixels, a height of 200 pixels, and a border of 15 pixels solid with the color #CC63FF.
An animation named "mymove" is defined using keyframes. It animates the border-left-color property to change to the color #FF63CC at 50% of the animation duration.
The animation is applied to the div element, making the left border color transition smoothly between the specified colors.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page