本文共 1550 字，大约阅读时间需要 5 分钟。

html5的过渡（transition）

过渡（transition）：通过过渡可以指定一个元素发生变化时的切换方式，从而创建一些比较好的效果，提升用户的体验。

transition-property（指定要执行过渡的属性）

transiton-duration（指定过渡效果的持续时间）

属性transition-property和 transiton-duration这两个得一起使用才有效。因为你得告诉系统你要过渡什么属性，过渡所用时间为多少，系统才能够为你准确的实现。

• transition-property:属性1，属性2，。。。,属性n;(所有的属性都想用过渡那么就直接写all）
• transition-duration: N s/ms;(秒和毫秒，1s=1000ms,N是常数)

例子：

.box2{   	transition-property:width, height;	transition-duration:2s;}

完整例子1：（实现方块的变大缩小）

显示：（图片会慢慢变大，耗时2s，等变到200px * 200px的时候，就会停下来，当你把鼠标移出.box1的时候，又会重新变回100px * 100px）

显示：（从左向右滑动）

transition-timing-function(过渡的时序函数）

transition-timing-function：指定过渡的执行方式，可选值：

• ease：慢速开始，先加速后减速（默认）
• linear：匀速运动
• ease-in：加速运动
• ease-out：减速运动
• ease-in-out：先加速后减速
• cubic-bezier（）来指定时序函数
  时序函数的值可以参考网址：

• steps(N)：分步执行过渡效果（瞬变N次，最后一次到达终点）
  也可以设置第二个参数（start或者end），比如：
  steps(2, start)，表示分两步进行，在每一秒的刚开始就动，大概1.01s到；
  steps(2, end)，表示分两步进行，在每一秒刚结束才动，大概2s到。

这些个效果还是自己测试效果会好一些，就不给出截图了，直接贴一段代码，有兴趣的可以自行更换属性的值进行查看。（.box3是用来做参照物的）

transition-delay(过渡效果的延迟）

transition-delay：等待一段时间后再执行过程。

transition(过渡的简写）

transition：可以同时设置过渡相关的所有属性，但是：只写一个时间代表过渡时间，写两个时间的话，第一个时间是过渡时间，第二个时间表示延迟时间。

transition-property: margin;transition-duration: 2s;transition-timing-function: steps(2,start);transition-delay: 2s;

我们可以简写成：

transition: margin 2s 2s steps(2,start);

转载地址：http://oixnz.baihongyu.com/