Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the width of the bottom border animatable using CSS?
In CSS, we can use the ‘border-bottom’ CSS property to set the bottom border for an HTML element. We can use the animation property to animate the width of the bottom border.
Also, we require to define the keyframes by changing the width of the bottom border to animate it.
Syntax
Users can follow the syntax below to animate the width of the bottom border.
selector {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
border-bottom: 25px solid black;
}
}
In the above syntax, we created the ‘mymove’ keyframes to animate the width of the bottom border from 5px to 25px.
Example 1
In the example below, we created the div element containing the ‘test’ class. Also, we have applied some CSS to the div element to style it. We used the ‘animation’ property to animate the div element according to the ‘mymove’ keyframes for 5 seconds and infinite times.
In the ‘mymove’ keyframes, we change the width of the bottom border to 0%, 30%, 60%, 85%, and 100%. In the output, users can observe the animation in the width of the bottom border.
<html>
<head>
<style>
.test {
width: 500px;
height: 200px;
background-color: red;
border: 2px solid green;
border-bottom: 5px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% { border-bottom: 5px solid black; }
30% { border-bottom: 15px solid black; }
60% { border-bottom: 25px solid black; }
85% { border-bottom: 15px solid black; }
100% { border-bottom: 5px solid black; }
}
</style>
</head>
<body>
<h2> Adding the <i> animation </i> to bottom border using CSS </h2>
<div class = "test"> </div>
</html>
Example 2
In the example below, we created the <h2> element and added some text content inside that. After that, we used CSS properties to style the element. We also used the ‘animation’ property to animate the width of the bottom border.
In the ‘border-animation’ keyframes, we change the width of the border by keeping other border properties the same.
<html>
<head>
<style>
.test {
width: fit-content;
border: 1px dotted blue;
border-bottom: 1px solid red;
animation: border-animation 1.5s infinite ease-in-out;
padding: 5px 10px;
color: green;
}
@keyframes border-animation {
0% { border-bottom: 1px solid red; }
30% { border-bottom: 3px solid red; }
50% { border-bottom: 5px solid red; }
70% { border-bottom: 3px solid red; }
100% { border-bottom: 1px solid red; }
}
</style>
</head>
<body>
<h2> Adding the <i> animation </i> to bottom border of checkbox using CSS</h2>
<h2 class = "test"> Welcome to the TutorialsPoint! </h2>
</html>
Users learned to animate the width of the border-bottom using CSS. We require to use the ‘animation’’ CSS property and define keyframes for the animation. In the keyframes, we can change the width of the border bottom using the ‘bottom-border’ or ‘bottom-border-width’ CSS properties.
423 Views
