上一章CSS3高级教程请查看:css3 3D变换
CSS3转换特性允许在指定的持续时间内平稳地更改CSS属性值。
理解CSS3转换通常,当CSS属性的值改变时,呈现的结果会立即更新。一个常见的例子是改变鼠标悬停时按钮的背景颜色。在正常情况下,当您将光标放在按钮上时,按钮的背景颜色会立即从旧的属性值更改为新属性值。
CSS3引入了一个新的转换特性,允许你在一段时间内使属性从旧值平滑地转换为新值。下面的示例将向你展示如何在鼠标悬停时HTML按钮的背景色background-color有动画。
button {
background: #fd7c2a;
/* For Safari 3.0+ */
-webkit-transition-property: background;
-webkit-transition-duration: 2s;
/* 标准语法 */
transition-property: background;
transition-duration: 2s;
}
button:hover {
background: #3cc16e;
}
【css3转换translation – CSS3高级教程】转变发生,你必须指定至少两件事——CSS属性的名称,你想使用转换属性transition-property CSS属性应用过渡效果,和过渡效果的持续时间(大于0)使用transition-duration CSS属性,但是,所有其他转换属性都是可选的,因为它们的默认值不会阻止转换的发生。
注意: 不是所有的CSS属性都是可动画的。通常,任何接受数字、长度、百分比或颜色值的CSS属性都是可动画的。
执行多个转换每个转换属性可以有多个值,用逗号分隔,这为使用不同的设置一次性定义多个转换提供了一种简单的方法。
button {
background: #fd7c2a;
border: 3px solid #dc5801;
/* For Safari 3.0+ */
-webkit-transition-property: background, border;
-webkit-transition-duration: 1s, 2s;
/* 标准语法 */
transition-property: background, border;
transition-duration: 1s, 2s;
}
button:hover {
background: #3cc16e;
border-color: #288049;
}
转换简写属性在应用转换时需要考虑许多属性。但是,也可以在一个属性中指定所有转换属性来缩短代码。
转换属性是设置所有单个转换属性(即transition-property, transition-duration, transition-timing-function和transition-delay按列出的顺序同时执行。
在使用此属性时,一定要严格遵守值的顺序。
button {
background: #fd7c2a;
-webkit-transition: background 2s ease-in 0s;
/* For Safari 3.0+ */
transition: background 2s ease-in 0s;
/* 标准语法 */
}
button:hover {
background: #3cc16e;
}
注意: 如果缺少或未指定任何值,将使用该属性的默认值。这意味着,如果缺少持续时间转换属性的值,则不会发生转换,因为其默认值为0。
CSS3转换属性下表提供了所有转换属性的简要概述:
属性 | 描述 |
transition | 在单个声明中设置所有四个独立转换属性的简写属性。 |
transition-delay | 指定转换何时开始。 |
transition-duration | 指定转换动画完成所需的秒数或毫秒数。 |
transition-property | 指定应用转换效果的CSS属性的名称。 |
transition-timing-function | 指定如何计算受转换影响的CSS属性的中间值。 |
推荐阅读
- css3动画animation – CSS3高级教程
- css3 3D变换 – CSS3高级教程
- css3 2D变换 – CSS3高级教程
- css3阴影shadow – CSS3高级教程
- css3文本溢出 – CSS3高级教程
- css3渐变gradient – CSS3高级教程
- css3背景background – CSS3高级教程
- css3颜色color – CSS3高级教程
- css3边界border – CSS3高级教程