CSS3过渡

transition概述

CSS3的transition功能是使得css样式在发生改变的时候有一个平滑过渡的过程，从效果上看就是一段动画。

transition属性包含4个子属性：

• transition-property：待过渡的属性名称
• transition-duration：过渡的周期时长（单位s/ms）
• transition-timing-function：过渡函数（过程的速度变化）
• transition-delay：过渡开启前的延迟时长（单位s/ms）
  
  
  

1、transition-property

基本上所有涉及颜色、大小（长度、百分比、数字）、位置的CSS属性都支持变换。transition-property的值也可以直接写成“all”，指代上述所有能支持变换的属性。

2、transition-duration

过渡整个过程的执行时间，无需赘述。

3、transition-timing-function

时间函数，即样式变化的动画执行方式，是由令人崩溃的贝塞尔曲线控制的。好在CSS3提供给我们几个可以直接使用并且常用的关键词：

• ease：由快到慢，逐渐减速（默认值）
• linear：始终匀速
• ease-in：始终加速（渐显效果）
• ease-out：始终减速（渐隐效果）
• ease-in-out：先加速后减速（渐显渐隐效果）

4、transition-delay

取值可以是：

• 正整数：经过设定的时间后才启动过渡
• 负整数：立即启动过渡，之前的过渡动作被截断
• 0：不延迟，立即启动过渡（默认值）

CSS3过渡的触发

• 伪类触发：:hover :active :focus :checked等
• 媒体查询触发
• JavaScript触发
  
  
  

书写方式

• 在书写transition属性的时候，可以把上述四个子属性写在一起用空格隔开；
  
  
• 另外transition本身是复合属性，它可以一次性声明多个待过渡的样式，以逗号分隔，
  如：transition: background 1s linear 0s, color 1s ease 1s;

兼容性

• IE9及其以下版本的浏览器不支持transition，其他的主流浏览器都能够完美支持。
  
  
• transitio属性在实际运用中，需要添加各大主流浏览器的私有前缀：
  
  • -webkit-transition
  • -moz-transition
  • -o-transition
  • -ms-transition

注意事项

针对同一样式的transition属性书写的次数和位置时，有不同的执行方式：

例1：

.box{background: black;transition: background 2s ease 0s;}
.box:active{background: blue;}

• 执行效果：元素在点击激活事件触发后，其背景色从黑到蓝的过渡时间为2s，无延迟。
  
  
• 分析：当transition写在触发事件前的原始样式块内，那么定义的过渡方式则是以触发后的样式（上述例子中的:active背景色样式）为过渡终点。

例2：

.box{background: black;transition: background 2s ease 999999s;}
.box:active{background: blue;transition: background 2s ease 0s;}

• 执行效果：元素在点击激活事件触发后，其背景色从黑到蓝的过渡时间为2s，无延迟；鼠标松开后，背景色保持为蓝色，因为其过渡恢复的启动有999999s的延迟，网页的延迟时间没有上限从而相当于12天。因此，从效果上看好像是鼠标点击事件通过JS彻底改变了样式。
  
  
• 分析：当transition在触发事件前、后样式块内都书写时，那么各自定义的过渡方式都是以当前所在的样式为过渡终点，和上述例子的顺序相反！