<!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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/172638.html
標籤：其他