CSS 属性: transition
外观随时间产生的渐变。例如,它允许链接在鼠标悬停时从一种颜色动画到另一种颜色。
一个简写属性,用于组合
可能的值
过渡特性子值列表。可能的子值遵循与相应上述属性的可能值相同的规则。子值列表遵循特定顺序
[property] [duration] [timing-function] [delay]
完整示例: color .3s linear 1s
并非所有值都是必需的。过渡生效只需要一个持续时间。例如,单独的 .3s 等同于 all .3s ease 0s。
inherit、initial 或 unset 也可以单独使用。
多个值
可以通过应用逗号分隔的列表将不同的过渡应用于不同的属性。
示例: 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. */
