概览
CSS 过渡( transition
)用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition
后,将按一个曲线速率变化。这个过程可以自定义。
CSS3 过渡和 CSS3 动画 具有类似的效果,但相对要简单不少。
过渡是作用在某个CSS属性上,而动画是作用在某个动画规则上,这点要注意。
小试牛刀
还是先看一个完整的小例子,来体会过渡的魅力吧。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: blue;
transition: width 2s;
-moz-transition: width 2s; /* Firefox */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
要实现过渡,必须规定以下两点:
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
过渡属性
过渡通过 transition
简写属性或其对应的具体属性来决定哪些属性发生动画效果 (明确地列出这些属性 transition-property
),何时开始 (设置 transition-delay
), 持续多久 (设置 transition-duration
) 以及如何动画 (定义transition-timing-function
函数,比如匀速地或先快后慢),下面分别介绍之。
transition-property
transition-property
属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。
提示:过渡效果通常在用户将鼠标指针浮动到元素上时发生。
transition-property: none; /* 没有过渡效果 */
transition-property: width; /* 宽度变化将获得过渡效果 */
transition-property: all; /* 所有属性变化将获得过渡效果 */
transition-property: width, height; /* 宽度和高度变化将获得过渡效果 */
transition-duration
transition-duration
属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。
transition-duration: 2s;/* 等价于2000ms */
transition-timing-function
transition-timing-function
属性规定过渡效果的速度曲线。
这部分同 CSS3 动画中的 animation-timing-function
,不多赘述。
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);
transition-delay
transition-delay
属性规定过渡效果何时开始(以秒或毫秒计,允许负值)。
transition-delay: 2s;
transition
上述具体属性的简写属性。
transition: property duration timing-function delay;
示例:
div {
width: 100px;
transition: width 1s linear 2s;
/* Firefox */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
div:hover {
width: 500px;
}
小结
过渡可以让属性的变化过程持续一段时间,而不是立即生效,这样可以很好的增强用户体验。
过渡是用来控制属性的持续,必须至少具备 属性 和 持续时间 两个条件才能产生效果。
过渡相对于动画来说较简单,一般会结合 2D/3D 变换来产生各种动画效果。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。