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
How to define the border bottom color is animatable in CSS?
The CSS border-bottom-color property is animatable, meaning it can smoothly transition from one color to another over time. This allows web developers to create visually appealing animations that enhance user interaction and draw attention to specific elements.
Syntax
selector {
border-bottom-color: color;
animation: animation-name duration timing-function iteration-count;
}
Animatable Properties in CSS
Before diving into border bottom color animation, it's helpful to understand other commonly animated properties
Color Animate text, background, and border colors
Opacity Create fade-in and fade-out effects
Transform Apply scaling, rotation, and translation
Width and Height Animate element dimensions
Box-shadow Animate shadow effects
Border-radius Change element shape over time
Example: Animated Border Bottom Color
The following example demonstrates how to animate the border bottom color using keyframes
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
padding: 50px;
}
.box {
height: 80px;
width: 60%;
margin: auto;
border-bottom: 12px solid red;
border-top: 12px solid green;
border-right: 12px solid blue;
border-left: 12px solid black;
animation: color-change 3s infinite;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
}
@keyframes color-change {
0% {
border-bottom-color: red;
}
50% {
border-bottom-color: orange;
}
100% {
border-bottom-color: yellow;
}
}
</style>
</head>
<body>
<div class="box">Border Bottom Animation</div>
</body>
</html>
A rectangular box with multiple colored borders appears. The bottom border smoothly transitions from red to orange to yellow in a 3-second repeating animation cycle.
Example: Hover Effect Animation
You can also create border bottom color animations triggered by user interaction
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 50px;
text-align: center;
}
.hover-box {
width: 200px;
height: 100px;
margin: auto;
border-bottom: 5px solid blue;
background-color: #e6f3ff;
transition: border-bottom-color 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.hover-box:hover {
border-bottom-color: red;
}
</style>
</head>
<body>
<div class="hover-box">Hover Over Me</div>
</body>
</html>
A light blue box with a blue bottom border appears. When you hover over it, the bottom border smoothly transitions from blue to red over 0.5 seconds.
Conclusion
The border-bottom-color property is fully animatable in CSS, allowing for smooth color transitions using keyframes or transitions. This creates engaging visual effects that can enhance user experience and draw attention to important elements on your webpage.
908 Views
