前端零基础入门 -- CSS3过渡

过渡

1. 控制CSS样式变化的过程
2. 过渡 – transition
   a. 允许CSS属性值在一定时间区间内平滑的过渡（动画形成的过程）
   b. 在鼠标点击，获得焦点，被单击或对元素任何改变中触发并平滑的以动画效果改变CSS属性值
3. 兼容性：IE10+ firefox16+ chrome26+ safari6.1+ opera12.1+
4. 总结：过渡就是一个元素的属性从一个值变化到另一个值

transition-property属性

1. 检索或设置对象中参与过渡的属性 – 指的就是要过渡到哪一个属性
2. 语法：transition-property: none|all| property;
   a. none – 没有属性变化
   b. all – 所有属性都会改变 – 默认值
   c. property – 元素属性名
3. 兼容性：IE10+ firefox16+ chrome26+ safari6.1+ opera12.1+

transition-duration属性

1. 检索或设置对象过渡持续的时间
2. 语法：transition-duration：time；
3. 参数说明：规定完成或效果完成所需的时间（单位：s 、ms），默认值：0
4. 兼容性：IE10+ firefox16+ chrome26+ safari6.1+ opera12.1+

transition-timing-function属性

1. 检索或设置对象中的过渡的动画类型
2. 语法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
3. 
   step-start 一帧一帧设置
   step-end
   step[start|end]

transition-delay属性

1. 检索或设置对象延迟过渡的时间 – 过渡的属性是立即执行还是延迟执行
2. 语法：transition-delay：time；
3. 参数说明：指定秒或毫秒之前等待效果的开始，默认值0 – 不延迟，立即执行

transition综合

1. transition：符合属性，检索或设置对象变化的过渡
2. 语法：transition：property duration timing-function delay；

transition属性总结

1. transition-property：指定属性名
2. transition-duration：过渡时间
3. transition-timing-function：过渡方法
4. transition-delay：延迟