21-动画

    
        
        
        
    
    
        

            
邱旭
        
    

语法：

     @keyframes animiationName{
            keyframes-selector{
                    css-style;
                      }
                    }    

` animiationName`:必写项，定义动画的名称
`keyframes-selector`：必写项，动画持续时间的百分比
            `from：0%`
            ` to：100%`
            `css-style`：css声明                

1.animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列值:
none
特殊关键字，表示无关键帧。
keyframename
标识动画的字符串
2.animation-duration属性指定一个动画周期的时长。
默认值为0s，表示无动画。
一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。
值：
注意：负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s
3.animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。
对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始，到关键帧结束。

动画的默认效果：由慢变快再变慢

linear:线性过渡，等同于贝塞尔曲线（0,0,1,1）
ease:平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
ease-in:由慢到快，等同于贝塞尔曲线（0.42,0,1,1）
ease-out:由快到慢，等同于贝塞尔曲线（0,0,0.58,1）
ease-in-out:由慢到快再到慢，等同于贝塞尔曲线（0.42,0,0.58,1）
cubic-bezier(1,1,2,3)
steps(n,[start|end])
传入一到两个参数，第一个参数意思是把动画分成 n 等分，然后动画就会平均地运行。
第二个参数 start 表示从动画的开头开始运行，相反，end 就表示从动画的结尾开始运行，默认值为 end。
4.定义动画开始前等待的时间,以秒或毫秒计(属于动画外的范畴)
值:

从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(m s)。如果未设置单位，定义无效
5.定义了动画执行的次数（属于动画内的范畴）
值
infinite无限循环播放动画.
动画播放的次数 不可为负值.
6.定义了动画执行的方向
值：
normal每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate
动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse
反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse
反向交替， 反向开始交替