Day 27 CSS3 < 动画 animation>

动画 (animation) 可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化、更多控制，连续自动播放等效果。

1.动画的基本使用

制作动画分为两步 :

a. 先定义动画
b. 在使用动画

2.使用方法 :

a.用keyframes定义动画 (类似定义选择器)

@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}

动画序列 :

• 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
• 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
• 请用百分比来规定变化发生的时间，或用关键词 form 和 to 等同於0%和100%

b.元素使用动画

CSS:
    /* 页面一打开 一个盒子就从左边走到右边 */

    /* 1.定义动画 */
    @keyframes move {

        /* 开始状态 */
        0% {
            transform: translateX(0px);
        }

        /* 结束状态 */
        100% {
            transform: translateX(1000px);
        }
    }

    div {
        width: 200px;
        height: 200px;
        /* margin: 100px auto; */
        background-color: gold;

        /* 2.调用动画 */
        /* animation-name:动画名称; */
        animation-name: move;
        /* 持续时间 */
        /* animation-duration: 持续时间; */
        animation-duration: 2s;
    }

HTML:
    <div>

    </div>

animation1

3.动画常见属性:

 /* 动画名称 */
            /* 动画名称 */
            /* animation-name: move; */
            /* 持续时间 */
            /* animation-duration: 2s; */
            /* 运动曲线 */
            /* linear(匀速) */
            /* animation-timing-function: ease; */
            /* 何时开始 */
            /* animation-delay: 1s; */
            /* 是否重复  EX:默认为1*/
            /* animation-iteration-count: 1; */
            /* 重复无限次 */
            /* animation-iteration-count: infinite; */
            /* 是否进行逆向播放  默认为normal*/
            /* animation-direction: normal; */
            /* 逆向播放 */
            /* animation-direction: alternate; */
            /* 规定动画结束的状态  默认为backwards 回到起始状态*/
            /* animation-fill-mode: backwards; */
            /* 停留在结束状态　forwards */
            /* animation-fill-mode: forwards; */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */

MDN 动画

4.动画属性简写:

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始 或者结束的状态;
animation:myfirst 5s linear 2s inginite alternate ;

• 简写属性里面不包含 animation-play-state
• 暂停动画 : animation-play-state:paused; 经常和滑鼠经过等配合使用
• 想要动画走回来而不是直接跳回来使用animation-direction : alternate;
• 盒子动画结束後，停在结束位置: animation-fill-mode:forwards;

CSS:
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(1000px, 0);
            }
        }

        div {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            animation: move 2s linear 0s 1 alternate forwards;
        }

        /* 滑鼠经过停止动画 离开後继续 */
        div:hover {
            animation-play-state: paused;
        }
    </style>
    
HTML:
    <div>

    </div>

animation2