当前位置：网站首页>【案例】animation动画曲线之steps的使用

【案例】animation动画曲线之steps的使用

2022-08-05 16:11:00 【发呆少女】

使用steps时，如果需要循环播放，则需要在steps中加入start，不然steps在页面的显示会少一次；或加入end，再重新调整相关参数。

方式1

<!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> div {
       overflow: hidden; /* 强制一行显示 */ white-space: nowrap; width: 0; height: 25px; background-color: pink; font-size: 20px; line-height: 25px; /* 使用steps时，如果需要循环播放，则需要在steps中加入start，不然steps在页面的显示会少一次 或加入end，再重新调整相关参数*/ animation: move 3s steps(5, start) infinite; } @keyframes move {
       0% {
       width: 0; } 100% {
       width: 100px; } } </style>
</head>

<body>
    <div>啦啦啦啦啦</div>
</body>

</html>

方式2

<!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> div {
       overflow: hidden; /* 强制一行显示 */ white-space: nowrap; width: 0; height: 25px; background-color: pink; font-size: 20px; line-height: 25px; /* 使用steps时，如果需要循环播放，则需要在steps中加入start，不然steps在页面的显示会少一次 或加入end，再重新调整相关参数*/ animation: move 3s steps(6, end) infinite; } @keyframes move {
       0% {
       width: 0; } 100% {
       width: 120px; } } </style>
</head>

<body>
    <div>啦啦啦啦啦</div>
</body>

</html>