CSS3过渡

CSS3

12.1

12.1.1 创建过度

• 默认样式中声明元素的初始样式
• 声明过度元素的最终状态样式
• 在默认样式中通过添加过度函数，添加不同的样式

12.1.2 浏览器兼容性

其他的浏览器的兼容效果：

• 添加私有属性:IE10+、Firefox4.0+~15.0、Chrome4.0~20.0、Safari3.1~6.0、Opera10.5~12.0
• iOS Safari3.2~6.1、Android22.0、Blackb Browser 7.0+和Chrome for Android 27.0 需要添加前缀
• iOS Safari7.0+ 和Firefox for Android 22.0+ 不需要添加前缀。

12.1.3 CSS3 过渡的属性

语法

transition:[<'transition-property'>||<transition-duration>||<transition-timing-function>||<transiton-delay>，[[<'transition-property'>||<transition-duration>||<transition-timing-function>||<transiton-delay>]]，*

• transition-property：指定过渡或者是动态模拟的CSS属性
• transition-duration：指定完成过渡所需的时间
• transition-timing-function：指定过渡函数
• transiton-delay:：指定过渡开始的延迟时间
  transition属性可以像border属性一样简写

transition:background 2s linear 2s,border 2s ease-in 3s;

子属性值之间用空额隔开，多个组合之间使用逗号隔开。
浏览器在解析的时候一般是将第一个表示时间的解析成为transition-duration，第二个时间解析成transition-delay

12.2.1 指定过渡属性的transition-property

transition-property表示的是要使用过的的属性，比如background-color，

1、取值

• none：没有指定任何的样式
• all：默认值，表示指定元素所有支持transition-property属性的样式
• single-property：指定某个样式

2、样式具备过渡效果的条件

• 颜色属性：background-color、color等
• 具有长度值、百分比的属性：word-spacing、width、vertical-align等
• integer：离散步骤，在真实的数字空间，以及使用floor（）转换整数时发生，outline-offset、z-index
• number真实的数值：zoom、opacity、font-weight等
• 变形系列：rotate()、rotate3d（）、scale等
• rectangle：通过x、y、width和height变换，如crop属性
• visibility：离散步骤，在0~1之间，0是隐藏，1是完全显示
• 阴影：作用于color、x、y 和blur属性，如text-shadow属性
• 渐变：通过每次停止时的位置的颜色进行变化，必须具有相同的类型和相同的停止数值
• paint server：只支持从gradient到gradient、color到color
• space-Seperated list of above：如果列表有相同的数值，则列表每一项按照上面的规则进行变化，否则没有变化。
• 缩写属性：如果缩写的所有部分都可以实现动画，就会像单个属性变化一样。

12.2.2 指定过渡所需的时间：transition-duration

transition-duration设置一个属性过渡到另外一个属性所需要的时间

1、语法

transition-duration:<time>[,<time>]* 

12.2.3 指定过渡函数transition-timing-function

1、语法

transition-timing-function:<single-transition-timming-function>[,<single-transition-timing-function>]

2、单一的过渡函数

3、step()函数
step（）函数用于把整个操作领域划分成同样大小的间隔，每个间隔是相等的。
step（）函数允许在固定的间隔播放动画

1）语法

steps(<integer>[,[start|end]]?)

包含两个参数

• <integer>：指定steps（）函数间隔的数量，必须是大于0的正整数
• start/end：默认值是end，指定每一步的值发生变化时的时间点。

12.2.4 指定过渡延迟时间transition-delay

定义过渡时间，也就是说触发后经过多长时间过渡才开始。

1、语法

transition-delay:<time>[,<time

参数的取值可以是0、正整数和负整数

1. 0：默认值，触发后过渡立即执行
2. 正整数：触发后经过设定的时间后再执行

3. 负整数：元素的过渡动作从该 时间点开始显示，之前的动作被截断

   ransition:width 2s steps(3,start) 0s, height 2s steps(3,start) -2s, background-color 4s steps(3,start) 2s;

   以上面这段代码为例，前面的width的变化会直接被截掉，而是直接跳到height变化这个动作。

   12.3 CSS3触发过渡

   12.3.1 伪元素触发

4. :hover

5. :active：表示用户单击某个元素并按住鼠标按钮是显示的状态
6. :focus：在元素接收键盘焦点的时候出现，比如文本输入框
7. :checked：

12.3.2 媒体查询触发

常见的是使用@media来实现媒体查询触发

12.3.3 JavaScript触发

最常见的是使用jQuery脚本实现类名的交换来达到触发多的目的

$(function (){
  $("#button").click(function(){
    $(".box").toggleClass("on");
  });
});