CSS translation

动画过渡属性

1、浏览器支持

• translation
• -moz-transition：Firefox
• -webkit-translation：Safari，Chrome，Edge
• -o-transition：Opera

2、定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

**注释：**请始终设置 transition-duration属性，否则时长为 0，就不会产生过渡效果。

默认值	继承性	版本	JavaScript语法
all 0 ease 0	no	CSS3	object.style.transition=“width 2s”

3、语法

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称
transition-duration	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义过渡效果何时开始

4、transition-delay 属性

定义和用法：

• transition-delay 属性规定过渡效果何时开始

• transition-delay 值以秒或毫秒计

默认值	继承性	版本	JavaScript 语法
0	no	CSS3	object.style.transitionDelay=“2s”

语法：

transition-delay: time;

值	描述
time	规定在过渡效果开始之前需要等待的时间，以秒或毫秒计

示例：

在过渡效果开始前等待 2 秒：

div
{
transition-delay: 2s;
-moz-transition-delay: 2s; /* Firefox 4 */
-webkit-transition-delay: 2s; /* Safari 和 Chrome 和 Edge*/
-o-transition-delay: 2s; /* Opera */
}

5、transition-duration 属性

定义和用法：

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）

默认值	继承性	版本	JavaScript 语法
0	no	CSS3	object.style.transitionDuration=“5s”

语法：

transition-duration: time;

值	描述
time	规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

示例：

让过渡效果持续 5 秒：

div
{
transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome 和 Edge */
-o-transition-duration: 5s; /* Opera */
}

6、transition-property 属性

定义和用法：

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）

**提示：**过渡效果通常在用户将鼠标指针浮动到元素上时发生。

**注释：**请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

默认值	继承性	版本	JavaScript 语法
all	no	CSS3	object.style.transitionProperty=“width,height”

语法：

transition-property: none|all|property;

值	描述
none	没有属性会获得过渡效果
all	所有属性都将获得过渡效果
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

示例：

把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果：

div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome 和 Edge */
-o-transition-property:width; /* Opera */
}

7、transition-timing-function 属性

定义和用法：

• transition-timing-function 属性规定过渡效果的速度曲线。

• 该属性允许过渡效果随着时间来改变其速度

默认值	继承性	版本	JavaScript 语法
ease	no	CSS3	object.style.transitionTimingFunction=“linear”

语法：

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

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

cubic-bezier(n,n,n,n)：里面的四个n是贝兹曲线的相关参数，参考：css3动画animation-timing-function中的cubic-bezier(n,n,n,n) - 放羊的星星bky - 博客园 (cnblogs.com)

示例：

以相同的速度从开始到结束的过渡效果：

div
{
transition-timing-function: linear;
-moz-transition-timing-function: linear; /* Firefox 4 */
-webkit-transition-timing-function: linear; /* Safari 和 Chrome 和 Edge */
-o-transition-timing-function: linear; /* Opera */
}

参考：CSS transition 属性 (w3school.com.cn)