CSS3_动画（九）

动画

animation-name：动画名称

animation-duration：动画持续时间

animation-delay：动画开始延迟时间

keyframes两种定义方式可以混用，但最好不要混用。

1 简单应用

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>简单应用</title>
    <style>
        .outer {
            height: 100px;
            width: 900px;
            border: 1px solid black;
        }

        .inner1 {
            height: 100px;
            width: 100px;
            background-color: aqua;
            float: left;
            animation-name: moveRight1;
            animation-duration: 2.5s;
            /* animation-delay: 0.5s; */
        }

        .inner2 {
            height: 100px;
            width: 100px;
            background-color: aquamarine;
            float: right;
            animation-name: moveRight2;
            animation-duration: 2.5s;
        }

        @keyframes moveRight1 {

            /* 第一帧 */
            from {}

            /* 最后一帧 */
            to {
                transform: translate(800px);
            }
        }

        @keyframes moveRight2 {
            0% {}

            50% {
                background-color: yellowgreen;
            }

            100% {
                background-color: blueviolet;
                transform: translate(-800px) rotate(720deg);
                border-radius: 50%;
            }
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner1">

        </div>
        <div class="inner2">

        </div>
    </div>
</body>

</html>

2 其他属性

animation-timing-function（动画播放方式）：与过渡属性一致；

animation-iteration-count（动画循环次数）：

number：循环次数；

infinite：无限循环。

animation-direction（动画方向）：

normal：默认，正方向；

reverse：反方向；

alternate：先正方向运行再反方向运行，持续交替运行；

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

animation-fill-mode（动画停止位置）：

forwards：动画停止位置；

backwards：动画开始位置。

animation-play-state（动画播放状态）：

running：运动，默认属性；

paused：暂停

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>其他属性</title>
    <style>
        .outer {
            height: 100px;
            width: 900px;
            border: 1px solid black;
        }

        .inner {
            height: 100px;
            width: 100px;
            background-color: aqua;
            animation-name: moveRight;
            animation-duration: 2.5s;
            animation-delay: 1s;

            /* 动画播放方式，与过渡一样 */
            animation-timing-function: linear;

            /* 动画播放次数，infinite为无限循环 */
            animation-iteration-count: infinite;

            /* 动画播放方向，alternate */
            animation-direction: alternate;

            /* 动画停止位置，forwords为最后一帧的位置 */
            /* animation-fill-mode: forwards; */
        }

        .outer:hover .inner {
            /* 动画播放状态 */
            animation-play-state: paused;
        }

        @keyframes moveRight {

            /* 第一帧 */
            from {}

            /* 最后一帧 */
            to {
                background-color: blueviolet;
                transform: translate(800px) rotate(720deg);
                border-radius: 50%;
            }
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">

        </div>
    </div>
</body>

</html>

3 动画复合属性

在复合属性中，两个时间设置有先后顺序，分别为duration和delay，其他属性没有数量和顺序要求。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>复合属性</title>
    <style>
        .outer {
            height: 100px;
            width: 900px;
            border: 1px solid black;
        }

        .inner {
            height: 100px;
            width: 100px;
            background-color: aqua;
            animation: moveRight 2.5s 0.5s linear 3 alternate forwards;
        }

        .outer:hover .inner {
            /* 动画播放状态 */
            animation-play-state: paused;
        }

        @keyframes moveRight {

            /* 第一帧 */
            from {}

            /* 最后一帧 */
            to {
                background-color: blueviolet;
                transform: translate(800px) rotate(720deg);
                border-radius: 50%;
            }
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">

        </div>
    </div>
</body>

</html>