动画样式解析

动画解析

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

---

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