动画边框底部长度从 0 到 100答案

【问题标题】：animate border bottom length from 0 to 100动画边框底部长度从 0 到 100
【发布时间】：2018-11-12 18:52:39
【问题描述】：

我需要使用关键帧动画为 div 的边框底部设置动画，而不使用 :before 或 :after 或修改当前的 html 结构

div{
    padding:3px 6px;
    display:inline-block;
    position:relative;
    border-bottom: 2px solid black;
}

&lt;div&gt;&lt;h1&gt;Lorem Ipsum&lt;/h1&gt;&lt;/div&gt;

【问题讨论】：

你用谷歌搜索过“关键帧动画”并尝试了解如何使用它吗？
是的，我已经用它来动画宽度，左或右，不透明度等，但在这里我试图为不工作的边框长度制作动画。我也需要一些帮助
啊，我明白了。我以为你想改变宽度，而不是长度。我认为第一步是想出一种方法来限制边框的长度，当你想出来的时候可以添加关键帧
codepen.io/martinwolf/pen/eNNdme
@Roy OP 不问:after

标签： html css css-animations keyframe

【解决方案1】：

使用渐变：

div.box {
  padding: 3px 6px;
  display: inline-block;
  position: relative;
  background: linear-gradient(#000, #000) bottom/0% 2px no-repeat;
  transition:1s all;
}

div.box:hover {
  background-size: 100% 2px;
}

<div class="box">
  <h1>Lorem Ipsum</h1>
</div>

【讨论】：

【解决方案2】：

你可以像下面这样模拟它。希望对您有所帮助。

.container {
  padding: 3px 6px;
  display: inline-flex;
  flex-direction: column;
}

.underline {
  height: 2px;
  max-width: 0%;
  background-color: black;
  animation: drawBorder 2s ease forwards;
}

@keyframes drawBorder {
  from {
    max-width: 0%;
  }
  to {
    max-width: 100%;
  }
}

<div class="container">
  <h1>Lorem Ipsum</h1>
  <div class="underline"></div>
</div>

【讨论】：