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

使用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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

方式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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

在这里插入图片描述

相关阅读:
C++ 火车调度
vue项目自己封装的组件没有发布npm如何在其他项目使用及组件如何注册
MAC环境nginx搭建静态资源服务器
【week307-amazon】leetcode2386. 找出数组的第 K 大和
Kube-OVN-安装配置参数选项
继续预训练对大语言模型的影响
【算法】道路与航线（保姆级题解）
ECharts综合案例一:近七天跑步数据
滴滴 - dispatching
1-07 React配置postcss-px-to-viewport

原文地址：https://blog.csdn.net/qq_43632490/article/details/126132654