今天看到一个文章，涉及css动画，但是楼主只实现了单行动画，作为标题，可能会有多行（但是行数也不会很多）所以研究了一下，写了该段代码！！
代码分析什么的就不写了（PS事业繁忙有点懒），具体可以参考该楼主的分析，我只是做了点装饰 # css是你永远学不会的语言
主要实现就是css动画animation， 楼主用的transition是在项目中最常用的动画，兼容问题比较少，就算浏览器不支持transition顶多就是没有动效但是交互依旧能体现，但是animation如果浏览器不支持可能会导致交互都有问题，所以慎用，但是随着电脑硬件的飞速发展，旧浏览器也在慢慢被淘汰，这毕竟是趋势，学习一下应该不会亏
废话少说，上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes myfirst {
from {
background-size: 0 2px;
background-position-x: left;
}
to {
background-size: 100% 2px;
background-position-x: left;
}
}
@keyframes mysecond {
from {
background-size: 100% 2px;
background-position-x: right;
}
to {
background-size: 0 2px;
background-position-x: right;
}
}
.box {
font-size: 24px;
font-weight: 600;
cursor: pointer;
}
.box span {
background: linear-gradient(to right, #000, #000) no-repeat right bottom;
background-size: 100% 2px;
}
.box :nth-child(1) {
animation: mysecond .5s;
animation-timing-function: cubic-bezier(1, 0.9, 0.7, 0.4, 0);
animation-fill-mode: forwards;
}
.box :nth-child(3) {
animation: mysecond .5s;
animation-delay: .4s;
animation-timing-function: cubic-bezier(1, 0.9, 0.7, 0.4, 0);
animation-fill-mode: forwards;
}
.box:hover :nth-child(1) {
animation: myfirst .5s;
animation-timing-function: cubic-bezier(1, 0.9, 0.7, 0.4, 0);
animation-fill-mode: forwards;
}
.box:hover :nth-child(3) {
background-size: 0 2px;
animation: myfirst .5s;
animation-delay: .4s;
animation-timing-function: cubic-bezier(1, 0.9, 0.7, 0.4, 0);
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div class="box">
<span>整活的路上永无止境整活的路上永无止境</span>
<br />
<span>整活的路上永无止境</span>
</div>
</body>
</html>
要是懒得复制去运行请直接看这里：
可能大家都会发现一个问题，就是初始化的时候会播放hover移除的动画，这里没有用到动态class的控制，我目前的方法只能实现这样，暂时想不到在不用js的情况下解决这个初始化，有厉害的大神可以讨论讨论，说说思路想法（记住我说的是不用js的话，用js解决方法就多了）。
而且我总感觉css部分代码还可以提炼一点，我就不研究了，交给评论区吧！
当然，这个时候有人可能就会发现，用animation以后，不会像上一个楼主的一样，换行的时候不生效，它奇迹般地生效了，那还用元素拆分干啥，直接限制宽度。
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes myfirst {
from {
background-size: 0 2px;
background-position-x: left;
}
to {
background-size: 100% 2px;
background-position-x: left;
}
}
@keyframes mysecond {
from {
background-size: 100% 2px;
background-position-x: right;
}
to {
background-size: 0 2px;
background-position-x: right;
}
}
.box {
width: 200px;
font-size: 24px;
font-weight: 600;
cursor: pointer;
}
.box span {
background: linear-gradient(to right, #000, #000) no-repeat right bottom;
background-size: 100% 2px;
animation: mysecond 1s;
animation-timing-function: cubic-bezier(1, 0.9, 0.7, 0.4, 0);
animation-fill-mode: forwards;
}
.box:hover span {
animation: myfirst 1s;
animation-timing-function: cubic-bezier(1, 0.9, 0.7, 0.4, 0);
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div class="box">
<span>整活的路上永无止境整活的路上永无止境</span>
</div>
</body>
</html>
同样懒得复制运行的，直接看这里：
两种思路，欢迎讨论！！大家一起进步
