【案例】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

在这里插入图片描述

相关阅读:
SQL底层执行原理
vue3使用插件fullcalendar生成日历或工作台
Qt学习08 启航！第一个应用实例
[vulnhub] Tr0ll: 2
【探秘Netty】千字拆解netty
JavaScript高级，ES6 笔记第三天
二叉树的重建问题
Scott Brinker：API对今天的Martech用户来说「非常重要」，但它们对即将到来的人工智能代理浪潮至关重要
【HTML学生作业网页】基于HTML+CSS+JavaScript仿南京师范大学泰州学院（11页）
Java多线程信号量和屏障实现控制并发线程数量，主线程等待所有线程执行完毕2

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