动画（1）

前言：

1、 什么是css动画：使⽤css技术来控制⻚⾯元素css属性的变化 2、css动画优势：不需要⽤js也能写，⽐较流畅，由浏览器去执⾏动画，减少代码量，性能⽐较⾼ 3、⼀般兼容到ie10以上浏览器（⼀般没太⼤问题） 

 过渡（transition）[træn'siʒən]

        -通过过渡可以指定一个属性发生变化时的切换方式

        -在某种条件下可以触发，例如hover情况下

        -IE10开始兼容，移动端兼容良好

        -通过过渡可以创建一些非常好的效果，提升用户体验

    属性（4个）

    (1)transition-property ['prɔpəti] 指定执行过渡的属性，多个属性，使用逗号隔开，

none 没有属性获得过 渡效果 all 所有属性都参与 过渡 默认值 property ⾃定义应⽤ 过渡效果，⼀个或多 个，⽤逗号隔开

    (2)transition-duration [djuə'reiʃən] 指定过渡效果的持续时间

时间的单位：s和ms 1s=1000ms

    (3)transition-timing-function: ;过渡的时序函数

ease [i:z] 默认值， 慢速开始，先加速，然 后再减速 *linear 匀速运动 ease-in 先慢后快 加速运动 ease-out 先快后慢 减速运动 ease-in-out 以慢速开 始和结束的过渡效果 *steps()分布执⾏过渡 效果 cubic-bezier(n,n,n,n) ⽴⽅⻉塞尔曲线函数， 值是0-1之间的数值

    (4)transition-delay: ;过渡效果的延迟，等待一段时间后执行过渡    

    (5)transition：；可以同时设置过渡相关的所有属性，

只有⼀个要求，如果要 写延迟， 则两个时间中,第⼀ 个写过渡时间，第⼆个 写延迟时间

动画：

动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发， 例如hover，acitve时，动画可以⾃动触发动画

第⼀步：先要设置⼀个关键帧，关键帧设置了动画每⼀个步骤 制定关键帧⽤的是@keyframes属性，指定关键帧主要有两种⽅法：

⽅法⼀： @keyframes 关键帧名称{ from{初始状态属性} to{结束状态属性}}

⽅法⼆： @keyframes 关键帧名称{ 0%{初始状态属性} 50%（中间还可以再添加关键帧） 100%{结束状态属性}

注意： 1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置

3 transition-timingfunction 过渡变化曲线（缓动效 果）（选填） *ease [i:z] 默认值， 慢速开始，先加速，然 后再减速

*linear 匀速运动 ease-in 先慢后快 加速运动 ease-out 先快后慢 减速运动 ease-in-out 以慢速开 始和结束的过渡效果

*steps()分布执⾏过渡 效果 cubic-bezier(n,n,n,n) ⽴⽅⻉塞尔曲线函数， 值是0-1之间的数值 4 transition-delay 过渡效果的延迟，等待 ⼀段时间后执⾏过渡 （选填）

时间的单位：s和ms 1s=1000ms 5 transition 同时设置过渡相关的所 有属性（选填） 只有⼀个要求，如果要 写延迟， 则两个时间中,第⼀ 个写过渡时间，第⼆个 写延迟时间 2、动画 2.1动画的理解 2、可以同时设置关键帧，⽤逗号（,）隔开就⾏