H5 + C3基础（七）（C3动画）

C3动画

动画定义

与动画相比，过渡，需要触发，而且效果相对比较单调，动画可以实现更细粒度的控制和更丰富的效果。

定义动画：

采用如下语法

定义一个名为 move_right 的动画

css 复制代码

@keyframes move_right {
   0% {
        margin-left: 0;
    }
    100% {
        margin-left: 500px;
    }
}

0% 也可以写作 from

100%也可写作 to

动画调用

基本调用

在相应的元素上调用这个动画

css 复制代码

div{
    width: 200px;
    height: 200px;
    background-color: #ee20ee;
    /*动画名称 必需*/
    animation-name: move_right;
    /*播放一边所需时间 必需*/
    animation-duration: 5s;
}

支持的参数

属性	说明
animation-name	动画名称
animation-duration	播放一次所需时间 s/ms
animation-timing-function	速度曲线（）
animation-delay	动画开始播放延迟时间 s/ms
animation-iteration-count	播放次数（infinite：表示一直循环播放）
animation-direction	下一次是否逆向播放（normal：从头开始播放；alternate：逆向播放）
animation-play-state	设置动画状态（running：正在播放，打开页面就处于播放状态，paused暂停播放，打开页面不自动播放）
animation-fill-mode	播放完成是否回到初始位置（forwards：停在结束位置；backwards：回到原点）

简写属性

除了animation-play-state 属性，其他可以简写。

ainimation: 名称周期速率曲线延迟次数是否逆向结束停留位置

除了周期和延迟有先后顺序，其他属性顺序不固定

示例

盒子沿四个角移动

css 复制代码

div {
   width: 200px;
    height: 200px;
    background-color: #ff6700;
    animation: move 4s;
}

@keyframes move {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(1000px, 0);
    }
    50% {
        transform: translate(1000px, 500px);
    }
    75% {
        transform: translate(0px, 500px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

模拟熊动图

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>熊跑</title>
        <style>
            .b {
                position: absolute;
                top: 528px;
                left: 0;
                width: 200px;
                height: 100px;
                background: url("img/bear.png");
                animation: run 1s steps(8) infinite forwards, b_run 3s linear forwards;
            }

            .m1 {
                position: relative;
                margin-top: 300px;
                width: 3840px;
                height: 336px;
                background: url("img/bg1.png") repeat-x 0px 100px;
                animation: bg1_mv 10s linear infinite backwards;
            }

            .m2 {
                position: absolute;
                top: 60px;
                width: 3840px;
                height: 569px;
                background: url("img/bg2.png") repeat-x 0px 100px;
                animation: bg1_mv 20s linear infinite forwards;
            }

            @keyframes run {
                0% {
                }
                100% {
                    background-position: -1600px 0;
                }
            }

            @keyframes b_run {
                0% {
                }
                100% {
                    left: 50%;
                    transform: translate(-50%);
                }
            }

            @keyframes bg1_mv {
                0% {
                }
                100% {
                    background-position: -3840px 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="m2"></div>
        <div class="m1"></div>
        <div class="b"></div>
    </body>
</html>