css3动画属性 - 爱码网

css3动画是一个非常重要的知识点，属性为：animation

animation（动画）与 transition（过渡）的区别是：

transition 需要事件进行触发，而 animation 不需要事件进行触发，调用关键帧即可。

那么第一步就是制作关键帧，其常用语法是：

@keyframes 关键帧的名称{ 0%{ } 20%{ } 30%{ } 40%{ } ... 100%{ } }

第二步：调用关键帧！常用方法是：

animation:关键帧的名称 ....;

animation 是一个复合属性，那么它的具体属性有哪些呢？下面我便一一讲解：

第一个：animation-name（关键帧的名称），想要调用一个关键帧，就必须添加关键帧的名称。

第二个：animation-duration（动画持续时间）单位可以是 s、ms

从下面的代码可以看出：动画的持续时间为4s,运动一次。

<!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>
        html,body,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,img,input,p,form,fieldset,legend{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 700px;
            height: 500px;
            background: gray;
            margin: 50px auto;
            position: relative;
        }
        h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s;
        }
        @keyframes h2Move{
            0%{
                left: 0;top: 0;
            }
            25%{
                left: 600px;top: 0;
            }
            50%{
                left: 600px;top: 400px;
            }
            75%{
                left: 0;top: 400px;
            }
            100%{
                left: 0;top: 0;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>
</html>

第三个：animation-timing-function 动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）默认为先加速后减速。

将代码中的h2改为如下所示，我们可以得到结果：动画持续时间4s，运动一次，运动类型为匀速运动。

　　　　h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s linear;
        }

第四个：animation-delay （动画开始播放的延迟时间）单位是 s、ms。

将代码中的h2改为如下所示，我们可以得到结果：动画延迟2s播放，动画持续时间4s，运动一次，运动类型为匀速运动。

　　　　h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s linear 2s;
        }

第五个：animation-iteration-count 动画运动的次数（默认情况下运动1次） infinite(无限循环)

将代码中的h2改为如下所示，我们可以得到结果：动画第一次播放延迟2s，动画持续时间4s，运动无限次，运动类型为匀速运动。

　　　　h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s linear 2s infinite;
        }

第六个：animation-direction （运动的方向）

属性值：

- reverse：反方向运行（让关键帧从后往前执行）

- alternate：动画先正常运行再反方向运行，并持续交替运行

- alternate-reverse：动画先反运行再正方向运行，并持续交替运行

将代码中的h2改为如下所示，我们可以得到结果：动画第一次播放延迟2s，动画持续时间4s，运动无限次，运动类型为匀速运动，运动方向为之前的反方向。

 　　　h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s linear 2s infinite reverse;
        }

第七个：animation-play-state （动画暂停）

属性值：

paused暂停

running运动

在之前代码中添加如下代码，我们可以得到结果：

动画第一次播放延迟2s，动画持续时间4s，运动无限次，运动类型为匀速运动，运动方向为之前的反方向，鼠标滑过box时动画暂停。

　　　　h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s linear 2s infinite reverse;
        }
        .box:hover h2{
            animation-play-state: paused;
        }

以上就是动画的所有属性，但是我们常用它的复合属性，即 animation：；大家只需记住每个属性值所代表的含义即可。

感谢您的阅读，欢迎留下宝贵的意见！