In CSS, we can use the "border-bottom" CSS property to set the bottom border of an HTML element. We can animate the width of the bottom border using the animation property.
Additionally, we need to define keyframes to animate the bottom border by changing its width.
grammar
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" keyframe to set the width of the bottom border from 5 pixels to 25 pixels.
Example 1
In the example below, we create a div element containing the "test" class. Additionally, we applied some CSS to the div element to style it. We use the "animation" attribute to animate the div element based on the "mymove" keyframe for 5 seconds and unlimited times.
In the "mymove" keyframe we change the width of the bottom border to 0%, 30%, 60%, 85% and 100%. In the output, the user can observe the animation of the lower border width.
<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 id="Adding-the-i-animation-i-to-bottom-border-using-CSS"> Adding the <i> animation </i> to bottom border using CSS </h2>
<div class = "test"> </div>
</html>
Example 2
In the example below, we create the
element and add some text content inside it. After that, we use CSS properties to style the element. We also use the "animation" property to animate the width of the bottom border.
In the "Border Animation" keyframe, we change the width of the border by keeping the 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 id="Adding-the-i-animation-i-to-bottom-border-of-checkbox-using-CSS"> Adding the <i> animation </i> to bottom border of checkbox using CSS</h2>
<h2 id="Welcome-to-the-TutorialsPoint"> Welcome to the TutorialsPoint! </h2>
</html>
Users learned to animate the width of the border bottom using CSS. We need to use the "animation" CSS property and define the keyframes of the animation. Within keyframes, we can change the width of the bottom of the border using the "bottom-border" or "bottom-border-width" CSS properties.
The above is the detailed content of How to set the width of an animatable bottom border using CSS?. For more information, please follow other related articles on the PHP Chinese website!
Where should 'Subscribe to Podcast' link to?Apr 16, 2025 pm 12:04 PMFor a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:
Browser Engine DiversityApr 16, 2025 pm 12:02 PMWe lost Opera when they went Chrome in 2013. Same deal with Edge when it also went Chrome earlier this year. Mike Taylor called these changes a "Decreasingly
UX Considerations for Web SharingApr 16, 2025 am 11:59 AMFrom trashy clickbait sites to the most august of publications, share buttons have long been ubiquitous across the web. And yet it is arguable that these
Weekly Platform News: Apple Deploys Web Components, Progressive HTML Rendering, Self-Hosting Critical ResourcesApr 16, 2025 am 11:55 AMIn this week's roundup, Apple gets into web components, how Instagram is insta-loading scripts, and some food for thought for self-hosting critical resources.
Git Pathspecs and How to Use ThemApr 16, 2025 am 11:53 AMWhen I was looking through the documentation of git commands, I noticed that many of them had an option for . I initially thought that this was just a
A Color Picker for Product ImagesApr 16, 2025 am 11:49 AMSounds kind of like a hard problem doesn't it? We often don't have product shots in thousands of colors, such that we can flip out the with . Nor do we
A Dark Mode Toggle with React and ThemeProviderApr 16, 2025 am 11:46 AMI like when websites have a dark mode option. Dark mode makes web pages easier for me to read and helps my eyes feel more relaxed. Many websites, including
Some Hands-On with the HTML Dialog ElementApr 16, 2025 am 11:33 AMThis is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
Dreamweaver Mac version
Visual web development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
