在 CSS 中，我们可以使用“border-bottom”CSS 属性来设置 HTML 元素的下边框。我们可以使用动画属性来动画底部边框的宽度。
此外，我们需要通过更改底部边框的宽度来定义关键帧以对其进行动画处理。
语法
用户可以按照下面的语法来设置底部边框宽度的动画。
selector {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
border-bottom: 25px solid black;
}
}
在上面的语法中，我们创建了“mymove”关键帧，将底部边框的宽度从 5 像素设置为 25 像素。
立即学习“前端免费学习笔记（深入）”；
示例 1
在下面的示例中，我们创建了包含“test”类的 div 元素。此外，我们还对 div 元素应用了一些 CSS 来设置其样式。我们使用“animation”属性根据“mymove”关键帧对 div 元素进行动画处理，持续 5 秒和无限次。
2010-10-31日最新更正： 一、更正了产品及文章无限分类不能显示继承类别的bug. 二、更正了产品名称标题过长导致页面布局错位的bug. 随缘企业网站管理系统(无限级分类红色版)简介: 一、全站采用主流DIV+CSS框架布局,宽屏红灰主色调，简洁大方。适合各类行业作为企业站使用。 二、后台可对相关的网站标题，关键词，描述、底部版权信息等进行设置，同时可指定相关的安装目录，可在二级目录使用。
在“mymove”关键帧中，我们将底部边框的宽度更改为 0%、30%、60%、85% 和 100%。在输出中，用户可以观察下边框宽度的动画。
Adding the animation to bottom border using CSS
示例 2
在下面的示例中，我们创建了
元素并在其中添加了一些文本内容。之后，我们使用 CSS 属性来设置元素的样式。我们还使用“animation”属性来设置底部边框宽度的动画。
在“边框动画”关键帧中，我们通过保持其他边框属性相同来更改边框的宽度。
Adding the animation to bottom border of checkbox using CSS
Welcome to the TutorialsPoint!
用户学会了使用 CSS 为边框底部的宽度设置动画。我们需要使用“animation”CSS 属性并定义动画的关键帧。在关键帧中，我们可以使用“bottom-border”或“bottom-border-width”CSS属性更改边框底部的宽度。
