模拟animation效果
参考MDN文档说明：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
animation-timing-function常见的四种速率变化
- ease 默认值，朝向动画中间的速度增加，最后逐渐减慢
- ease-in 开始时会缓慢，随着动画属性过渡的速度增加，直到完成为止
- ease-in-out 动画属性缓慢过渡，加速，然后再次减速
- ease-out 开始很快，放慢动画的速度继续
- linear 线性匀速
实现模拟
整体布局
<div class='box'> <ul> <li>ease</li> <li>ease-in</li> <li>ease-in-out</li> <li>ease-out</li> <li>linear</li> </ul> </div>
转换为1行5列
- grid-template 网络划分
- gap 间距
ul{ display: grid; grid-template:1fr/repeat(5,1fr); list-style: none; gap:1em; } li{ text-align: center; color: #000000; text-transform: uppercase; height:50px; width: 100px; animation-name: move; animation-duration: 6s; animation-iteration-count:infinite; }动画
下移80%;@keyframes move{ to{ transform: translateY(80vh); } } li:nth-child(1){ background: #CAD3C8; animation-timing-function: ease; } li:nth-child(2){ background: #3B3B98; animation-timing-function: ease-in; } li:nth-child(3){ background: #B33771; animation-timing-function: ease-in-out; } li:nth-child(4){ background: #25CCF7; animation-timing-function: ease-out; } li:nth-child(5){ background: #EAB543; animation-timing-function: linear; }整体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>annimation</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
background: #7f8fa6;
display: grid;
grid-template: 1fr/1fr;
}
.box {
margin: 0 auto;
}
ul {
display: grid;
grid-template: 1fr/repeat(5, 1fr);
list-style: none;
gap: 1em;
}
li {
text-align: center;
color: #000000;
text-transform: uppercase;
height: 50px;
width: 100px;
animation-name: move;
animation-duration: 6s;
animation-iteration-count: infinite;
}
@keyframes move {
to {
transform: translateY(80vh);
}
}
li:nth-child(1) {
background: #CAD3C8;
animation-timing-function: ease;
}
li:nth-child(2) {
background: #3B3B98;
animation-timing-function: ease-in;
}
li:nth-child(3) {
background: #B33771;
animation-timing-function: ease-in-out;
}
li:nth-child(4) {
background: #25CCF7;
animation-timing-function: ease-out;
}
li:nth-child(5) {
background: #EAB543;
animation-timing-function: linear;
}
</style>
</head>
<body>
<div class='box'>
<ul>
<li>ease</li>
<li>ease-in</li>
<li>ease-in-out</li>
<li>ease-out</li>
<li>linear</li>
</ul>
</div>
</body>
</html>
结束
