动画--过渡

动画

前⾔：

1、 什么是css动画：使⽤css技术来控制⻚⾯元素 css属性 的变化

2、css动画优势：不需要⽤js也能写，⽐较流畅，由浏览器去执⾏动画，减少代码量，性能⽐较⾼

3、⼀般兼容到ie10以上浏览器（⼀般没太⼤问题）

1、过渡

1.1过度的理解

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

        -通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡

        -需要在某种条件下触发，例如hover、active、focus情况下

        -⼀次性的效果，不能循环，只能做简单的动画

        -只有两帧，设置动画初始值和结束值

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

1.2.过渡的4个属性

序号	属性	意义	备注
1	transition-property ['prɔpǝti]	哪些属性要过渡 （选 填）	·none 没有属性获得过 渡效果 ·all 所有属性都参与过 渡 默认值 ·property ⾃定义应⽤ 过渡效果，⼀个或多 个，⽤空格隔开 注意： 1、所有 数值类型 的属 性，都可以参与过渡， ⽐如width、height、 left、top、border radius、opacity等 2、从⼀个有效数值 向另⼀个有效数值进⾏ 过渡
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	过渡效果的延迟，等待 ⼀段时间后执⾏过渡 （选填）	时间的单位：s和ms 1s=1000ms
5	transition	同时设置过渡相关的所 有属性 （选填，过渡时间 是必写）	只有⼀个要求，如果要 写延迟， 则两个时间中,第⼀ 个写过渡时间，第⼆个 写延迟时间