CSS3过渡模块

[部分图片和文字来自：]http://www.css88.com/archives/4705

1、什么是CSS3过渡？

CSS3 过渡（transition）是通过定义元素从 起点的状态 和 结束点的状态 ，在一定的时间区间内实现元素平滑地过渡或变化 的一种补间动画机制。你可以让属性的改变过程持续一段时间，而不是立即生效。

通过transition你可以决定哪个属性发生动画效果 (可以通过明确地列出这些属性)，何时开始动画 (通过设置delay), 动画持续多久 (通过设置duration), 以及如何动画 (通过定义timing函数，比如线性地或开始快结尾慢)。

2、过渡的三要素

1、必须有某个元素的属性发生改变
2、规定您希望把效果添加到哪个 CSS 属性上
3、规定效果的时长

3、CSS3过渡有哪些属性？

3.1 transition-property（过渡属性）

语法
transition-property: none|all|property;

image.png

• 指定为 none时，没有属性会获得过渡效果，已经执行的过渡效果也会立即停止。

• 默认值为all，元素任何可过渡（transition）属性值变化时都将执行过渡（transition）效果。

• 可以单独指定元素哪些属性改变时执行过渡（transition），可以触发浏览器reflow或repaint的属性那些CSS属性可以应用动画，可参见：https://developer.mozilla.org/zh-CN/docs/CSS/CSS_animated_properties这里列出所有的CSS属性，如果可以做动画，那么会说明是如何设置。

3.2 transition-duration（过渡持续时间）

1.用来指定过渡的持续时间。时间值如：1s（秒），800ms（毫秒）。
2.默认值是0s。也可以理解为没有过渡（transition）效果。

语法

transition-duration: time;

image.png

3.3 transition-timing-function（过渡时间函数）

语法：
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

指定CSS属性的变换速率，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时ease：

1.ease：（逐渐变慢）默认值，等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2.linear：（匀速），等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3.ease-in：(加速)，等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4.ease-out：（减速），等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5.ease-in-out：（加速然后减速），等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6.cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。w3c文档中表述是所有值需在[0, 1]区域内，否则无效。但是在一些浏览器（Chrome，Firefox，Opera，IE11 预览版）下对P1(x1, y1)和P2(x2, y2)的坐标中的y1和y2并没有这个限制，曲线可以是负值，也可以取大于1的值。如果x1和x2是负数，或者大于1的值那么直接应用最终样式没有过渡效果。而一些老版本的浏览器曲线值仍需在[0, 1]区域内，否则直接应用最终样式，比如Opera 12，和老版本的webkit浏览器,其他没测试。可以看看下面demo中的最后一个案例-Awesome!

查看demo：不同的timing functions demo http://css88.com/demo/css3_transition/

推荐两个简单直观的cubic-bezier() 贝塞尔曲线设置工具：

http://www.webstuffshare.com/2012/04/showing-product-information-with-css3-3d-transform/

http://cubic-bezier.com/
注：关于step-start，step-end，steps(<integer>[, [ start | end ] ]?)取值这里不做说明，大家可以看看
http://www.w3.org/TR/css3-transitions/#transition-timing-function-property
和
http://www.css88.com/archives/5403/https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

3.4 transition-delay（过渡延迟函数）

指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”，初始默认值为0；

image.png

4、 transition的简写

语法
transition: property duration timing-function delay;

image.png

其他情况：当属性值列表长度不一致时

以 transition-property 的值列表长度为标准，如果某个属性值列表长度短于它的，则重复值以长度一致， 例如:

css 代码:div {  transition-property: opacity, left, top, height;  transition-duration: 3s, 5s;
}

将按下面这样处理:

css 代码:div {  transition-property: opacity, left, top, height;  transition-duration: 3s, 5s, 3s, 5s;
}

类似地，如果某个属性的值列表长于 transition-property 的，将被截短。 例如:

css 代码:div {  transition-property: opacity, left;  transition-duration: 3s, 5s, 2s, 1s;
}

将按下面这样处理:

css 代码:div {  transition-property: opacity, left;  transition-duration: 3s, 5s;
}

5、如何执行过渡效果

css3过渡动画一般通过鼠标事件或者鼠标状态定义动画，通常我们可以用CSS中伪类、使用js修改元素的样式属性或追加删除样式来执行定义的动画。CSS中伪类执行动画包括：

作者：道理好懂情绪难控
链接：https://www.jianshu.com/p/239c39205cd5