CSS3动画 animation_css3 animation-CSDN博客

本文链接：https://blog.csdn.net/qq_52301431/article/details/123906718

本文详细介绍了CSS3动画的基础用法，包括from/to关键字、百分比动画、运动函数、延迟、循环次数、反向运动和播放状态控制。通过实例演示了如何创建和控制元素的平滑过渡和动画循环。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3动画 animation

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

格式：

animation: 动画名字动画时间运动曲线何时开始循环次数反向运动
animation: onemove 5s ease-in-out 2s 3 alternate;

1、基本使用

1.1、语法from to

@keyframes mymove{
                from{}
                to{}
            }

百分比 实例

div {
                width: 100px;
                height: 100px;
                background: red;
                animation: mymove 5s;
                position:absolute;
                left: 0px;
                top:0px;
            }
            /*@keyframes是关键字不能更改  name是自定义的变量*/
            @keyframes mymove{
                from{
                    left: 0px;
                }
                to{
                    left:100px ;
                }
            }

1.2、百分比

实例

 div {
            margin: 200px auto;
            width: 100px;
            height: 100px;
            background-color: red;
            animation: myani1 10s linear;
        }
        @keyframes myani1 {
            0%{
                transform: translate(0, 0);
            }
            25%{
                transform: translate(100px, 0);
            }      
            50%{
                transform: translate(100px, 100px);
            }
            75%{
                transform: translate(0, 100px);
            }
            100%{
                transform: translate(0, 0);
            }
        }

2、动画运动animation-timing-function

linear：线性过渡

ease：平滑过渡

ease-in：由慢到快

ease-out：由快到慢

ease-in-out：由慢到快再到慢

3、动画延时animation-delay

animation-delay 属性定义动画什么时候开始。
/*延迟2s,只有第一次会延迟*/
animation-delay:2s;

4、循环次数animation-iteration-count n大于0，且为整数
/*循环3次 */
animation-iteration-count：3;
/*无限循环 */
animation-iteration-count：infinite;

5、反向运动animation-direction

normal

每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性，每次都是开始执行

reverse

反向运行动画，每周期结束动画由尾到头运行。动画每次都是从尾部开始运行

alternate

动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代，也就是第一次是正向的，第二次是反向的

alternate-reverse

反向交替，反向开始交替

动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。第一次是反向，后面是第二次是正向。

6、animation-play-state暂停或停止

animation-play-state css属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

/*运行*/
animation-play-state: running;
/*暂停*/
animation-play-state: paused;


<!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>06-动画animation</title>
    <style>
        .fa {
            width: 500px;
            height: 500px;
            border: 1px solid;
            perspective: 200px;
            margin: 0 auto;
        }
        .sn {
            /* transition: all 2s ease-out 1s; */
            width: 150px;
            height: 150px;
            background-color: green;
            /* animation: onemove 5s ease-in-out 2s 3 alternate; */
            animation: twomove 5s ease-in-out 2s 3 alternate;
        }
        @keyframes onemove {
            from {
                width: 150px;
                height: 150px;
            }
            to {
                width: 400px;
                height: 400px;
            }
        }
       @keyframes twomove {
           0% {
            /* transform复合值 通过空格隔开 */
            transform: translate3d(100px, 100px, 0px) scale(.5);
           }
           50% {
            transform: translate3d(200px, 200px, 0px) scale(2);
           }
           100% {
            transform: translate3d(1, 1, 1 ,45deg) skewX(45deg);
           }
       }
    </style>
</head>
<body>
    <div class="fa">
        <div class="sn"></div>
    </div>
</body>
</html>