css3动画属性

时间 2020-03-01

标签 css3 css 动画属性栏目 CSS 繁體版

原文原文链接

css3动画是一个很是重要的知识点，属性为：animationcss

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

transition 须要事件进行触发，而 animation 不须要事件进行触发，调用关键帧便可。css3

那么第一步就是制做关键帧，其经常使用语法是：css3动画

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

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

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

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

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

第二个：animation-duration（动画持续时间）单位能够是 s、msblog

从下面的代码能够看出：动画的持续时间为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：；你们只需记住每一个属性值所表明的含义便可。

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