动画样式解析

动画解析

一、过度：（一个动画需要有开始，过程，结束的时间，我们一般只
需要描述开始与结束就行，过程电脑自动补充）
    1、tansition-duration,过渡时间。过渡时间写在不同属性上
    有不同的效果，开始有，结束有（原元素上）,开始没有,结束有
    （写在伪类属性上),开始没有，结束有（过度时间写原元素
    上，伪类里面过渡时间0s）。
    2、transition-delay,过度延时。正数表示这个效果延迟多少
    秒之后延迟，负数表示元素提前多少变化。
    3、transition-property,规定过渡元素作用于那条元素上
    面。可选值：none所有过度效果都没用，all表示所有过度值都
    有效果
    4、transition-timing-function,贝塞尔曲线如下图（了解）
   ![图片.png](/img/bVbIi5j)
   

---

  二、主动式动画
    1、animation-name（定义动画名称）
    2、animation-duration（运动时长）
    3、animation-timing-function（运动速率）
    4、animation-iteration-count:infinite（运动方式）
    5、animation-fill-mode（动画结束时候的状态）
        可选值：
            1、backwards 默认回到初始位置
            2、forwards 执行动画完成后保留最后状态
    6、animation-direction: 放置元素运动的时候出现不连贯的
    情况
        可选值：
            1、normal(0~100): 瞬间切回去,每一次都是正向播
            放。
            2、reverse(100~0); 从100%的位置到0%的位置。
            3、alternate(0~100~0);从0%出发来回播放,大于等
            于2能看到效果
            4、alternate-reverse(100~0~100) 从100%出发来
            回播放,大于等于2能看到效果。