css3 贝塞尔曲线理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
ul {
display: grid;
list-style: none;
grid-template: 1fr/ repeat(5, 1fr);
gap: 5px;
}
li {
height: 50px;
background-color:orange;
animation-name: down;
animation-duration: 2s;
animation-iteration-count: infinite;
display: flex;
justify-content: center;
align-items: center;
}
li:nth-child(1) {
/* 慢》快》慢》非常慢 */
animation-timing-function: ease;
}
li:nth-child(2) {
/* 从慢到快 */
animation-timing-function: ease-in;
}
li:nth-child(3) {
/* 从快到慢 */
animation-timing-function: ease-out;
}
li:nth-child(4) {
/* 两头慢中间快 */
animation-timing-function: ease-in-out;
}
li:nth-child(5) {
/* 匀速 */
animation-timing-function: linear;
}
li:nth-child(5) {
/* 自定义 最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线 */
animation-timing-function: cubic-bezier(.26, .53, 1, .3);
}
@keyframes down {
to {
transform: translateY(90vh);
}
}
</style>
</head>
<body>
<ul>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
<li>linear</li>
<li>cubic-bezier</li>
</ul>
</body>
</html>