Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Animate CSS border-left-color property
The CSS border-left-color property can be animated to create smooth color transitions on the left border of an element. This animation effect is useful for creating interactive hover states, loading indicators, or visual emphasis.
Syntax
selector {
border-left-color: color;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
from { border-left-color: initial-color; }
to { border-left-color: final-color; }
}
Example
The following example demonstrates how to animate the border-left-color property from yellow to lightblue −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 300px;
height: 150px;
background: yellow;
border: 10px solid yellow;
border-left-width: 20px;
animation: colorChange 3s infinite alternate;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #333;
}
@keyframes colorChange {
0% {
border-left-color: yellow;
}
50% {
border-left-color: red;
}
100% {
border-left-color: lightblue;
}
}
</style>
</head>
<body>
<h2>Animating Border Left Color</h2>
<div class="animated-box">Watch the left border!</div>
</body>
</html>
A yellow box with animated left border that smoothly transitions from yellow to red to lightblue and back, repeating infinitely. The left border appears thicker than other borders to emphasize the color change effect.
Conclusion
Animating the border-left-color property creates smooth color transitions that enhance user experience. Use keyframes to define color stops and control timing for effective visual effects.
Updated on: 2026-03-15T13:25:41+05:30
218 Views
Advertisements