css transition 属性 #

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。——引用自MDN

一.语法 #

transition: <property-name | globalkeyword> [duration] [timing function] [delay]，尖括号表示的是必填项，中括号表示选填项。

• property-name：需要控制的CSS属性名称，例如width、height，也可以使用none和all，all表示控制所有css属性。
• globalkeyword：全局关键字，inherit、initial、unset，当使用keyword时，不可以添加duration、timing function和delay值。
• duration：动画持续的时间。
• timing function：动画在每一动画周期中执行的节奏，具体可以参考css动画教程中的animation-timing-function属性。
• delay：动画延迟执行的时间。

二.transition实践 #

接下来，一起动手使用transition制作几个特效。

按钮的悬浮效果 #

下面的例子，当鼠标指针进入button内部，button的背景色会在一秒内由白色变为浅蓝色。

核心代码：

.btn {
    transition: all 1s; // all表示应用于所有属性
}
.btn:hover {
    background: lightblue;
}

按钮的Click效果 #

也可以通过js代码更改css属性值，触发transition动画。

（完）