日期:2021年10月14日标签:CSS

css transition 属性 #

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

一.语法 #

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

  • property-name:需要控制的CSS属性名称,例如widthheight,也可以使用noneallall表示控制所有css属性。
  • globalkeyword:全局关键字,inheritinitialunset,当使用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动画。

(完)

目录