本特性是实验性的
本特性相关的W3规范尚未被最后确定。使用时请检查浏览器兼容表以及属性的浏览器前缀。尽管CSS3的一些高级特性没有被最终确定,但在Chrome/Safari/Firefox等现代浏览器上已经得到了广泛的支持。使用这些特性时,只要在目标设备上做好兼容性测试就好。后面不再重复。
HTML元素有不同的状态,状态之间切换的平滑过渡效果可以通过transitions来定义。
你可以定义:
transition-property
: 哪个属性要应用渐变动画transition-duration
: 渐变动画持续时间transition-timing-function
: 中间状态如何计算transition-delay
: 何时开始启动渐变动画
我们可以单独设置这些属性,也可以使用速写版本:transition
。速写方式下只有持续时间(duration)的定义是必须的:
transition: property duration timing-function delay;
记住,转换(transition)本质上就是一个特定类型的动画,这个动画由开始状态、终止状态以及过渡过程来定义。
一个颜色转换的例子
转换(transitions)常被用于悬停状态
a{ background: lightgrey; color: grey;}
a:hover{ background: yellow; color: red;}
a.with-transition{ transition: 1s;}
上面的第一个链接被悬停时,马上切换到了新的颜色,第二个链接在悬停时,缓缓地切换到新的颜色。显然使用transition,可以获得更柔和平滑的交互体验。
转换持续时间(transition-duration)
transition-duration 是创建 transition 的唯一必选参数。它可以使用秒或毫秒来做时间单位,比如:2s
或 100ms
。
如果你想转换持续半秒,可以写成 0.5s
或 500ms
。
a{ background: lightgrey; color: grey;}
a:hover{ background: yellow; color: green;}
a.with-fast-transition{ transition-duration: 0.5s;}
a.with-slow-transition{ transition: 3s;}
转换属性(transition-property)
transition-property用来定义哪个属性要应用转换动画,只有1/3的CSS属性支持转换动画。可以在Mozilla网站上查阅完整列表:CSS动画属性。
缺省情况下,transition-property
的取值为 all
,也就是说将对所有可能的属性应用转换动画。
我们当然可以用 transition-property 来限定某个或某些属性:
a{ background: lightgrey; color: grey;}
a:hover{ background: yellow; border: 5px solid blue; color: green;}
a.with-background-transition{ transition-duration: 2s; transition-property: background;}
a.with-all-transition{ transition-duration: 2s;}
上面的第三个链接的 border
属性也被应用了转换动画,2秒内从0到5px宽度的缓慢增长。
转换时变函数(transition-timing-function)
转换时变函数用来确定每个属性在转换过程中取值如何计算。
缺省情况下,转换过程是 缓动的(eased):时变特征是在起点处加速,在终点处减速。
我们可以把 transition 看作是一个匀速过程,而时变函数则给这个过程添加了加减速的变量。
我们用下面的动画来演示各个缓动时变函数的实际效果:
div{ left: 0; position: relative; transition: 1s;}
main:hover div{ left: 200px;}
.ease{ transition-timing-function: ease;} /* Default behavior */
.linear{ transition-timing-function: linear;} /* Constant speed */
.ease-in{ transition-timing-function: ease-in;}
.ease-out{ transition-timing-function: ease-out;}
.ease-in-out{ transition-timing-function: ease-out;}
<main>
<p><strong>Ease</strong>: 启动慢, 中间快, 停止慢</p>
<div class="ease"></div>
<p><strong>Linear</strong>: 匀速</p>
<div class="linear"></div>
<p><strong>Ease In</strong>: 启动慢, 停止快</p>
<div class="ease-in"></div>
<p><strong>Ease Out</strong>: 启动快, 停止慢</p>
<div class="ease-out"></div>
<p><strong>Ease In Out</strong>: 和 ease 类似,但是有更为明显的加减速曲线</p>
<div class="ease-in-out"></div>
</main>
Ease: 启动慢, 中间快, 停止慢
Linear: 匀速
Ease In: 启动慢, 停止快
Ease Out: 启动快, 停止慢
Ease In Out: 和 ease 类似,但是有更为明显的加减速曲线
需要注意的是,上面所有的转换时间是相同的(都是1秒)。
还有其他一些ease系列的转换函数,要查看其效果,可以访问 缓动函数列表。
三次贝塞尔(cubic-bezier)
如果所有上述预定义的时变函数满足不了要求,我们还可以使用cubic bezier方法来自定义转换过程。
这个站点 cubic-bezier.com 提供简单的可视化工具来编写自定义的时变曲线。可以自动生成CSS代码。
转换延迟(transition-delay)
transition-delay 用来定义在动画开始之前需要等待多长时间。
和 transition-duration
一样,你可以使用秒或毫秒来定义。
a{ background: blue; color: white; transition: all 1s;}
div:hover a{ background: red;}
a.with-delay{ transition-delay: 2s;}
<div>
<p>请悬停在本灰色区域并等待2秒</p>
<a>没有延迟</a>
<a class="with-delay">有一秒钟延迟</a>
</div>