尝试将伪元素线从左到右生长到容器的全宽,然后从右到左将其缩小到零宽度。旁注:在JavaScript中,我将在超时后添加“带下划线的动画”类。
我尝试摆弄一些关键帧。
em::after {
content: "";
height: 1px;
width: 0;
display: inline-block;
position: absolute;
left: 0;
background: green;
transition: all;
}
.underlined-animated::after {
animation: underline-animated 5s forwards;
}
@keyframes underline-animated {
0% {width: 0;}
50% {width: 100%; left: initial; right:0;}
100% {width: 0;}
}
我希望这条线在一个动画中从左向右增长-达到容器宽度的100%,然后从右向左收缩-达到容器宽度的0%。< / p>
以上代码的结果只是一条奇怪的增长和缩小行。
答案 0 :(得分:1)
不是对width
进行动画处理,而是对right
进行动画,直至达到50%的关键帧,并使left
从50%
关键帧到结束:
em::after {
content: "";
height: 1px;
display: inline-block;
position: absolute;
left: 0;
background: green;
transition: all;
}
.underlined-animated::after {
animation: underline-animated 5s forwards;
}
@keyframes underline-animated {
0% {
right: 100%;
}
50% {
right: 0;
left: 0;
}
100% {
right: 0;
left: 100%;
}
}
<em class="underlined-animated">I'm the text</em>