HTML Dog
跳至导航

CSS 属性: transition

外观随时间产生的渐变。例如,它允许链接在鼠标悬停时从一种颜色动画到另一种颜色。

一个简写属性,用于组合

可能的值

过渡特性子值列表。可能的子值遵循与相应上述属性的可能值相同的规则。子值列表遵循特定顺序

[property] [duration] [timing-function] [delay]

完整示例: color .3s linear 1s

并非所有值都是必需的。过渡生效只需要一个持续时间。例如,单独的 .3s 等同于 all .3s ease 0s

inheritinitialunset 也可以单独使用。

多个值

可以通过应用逗号分隔的列表将不同的过渡应用于不同的属性。

示例: color .3s linear 1s, background .2s ease-in 1s, opacity .3s

示例


a {
    color: rgba(255,0,0,.5);
    transition: color .3s linear 1s;
}
/* A semi-transparent red link with a color property, .3s duration, linear, 1s delayed transition. */

a:hover {
    color: rgba(255,0,0,1);
}
/* The color of the link will take 0.3s to turn solid red at a constant speed one second after being hovered over.  */

浏览器支持

css-transitions 支持情况? 来自 caniuse.com 的关于 css-transitions 功能在各大浏览器中支持情况的数据。