CSS3过渡模块

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

1、什么是CSS3过渡？

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

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

2、过渡的三要素

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

3、CSS3过渡有哪些属性？

属性	描述
transition	简写格式。用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的css属性名称。
transition-duration	规定过渡要花费的时间，默认是0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡从何时开始。默认是0。

3.1 transition-property（过渡属性）

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

webp

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;

webp

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；

webp

image.png

4、 transition的简写

语法
transition: property duration timing-function delay;

webp

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中伪类执行动画包括：

动态伪类	起作用的元素	描述
:link	只有链接	未访问的链接
:visited	只有链接	访问过的链接
:hover	所有元素	鼠标经过元素
:active	所有元素	鼠标点击元素
:focus	所有可被选中的元素	元素被选中

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