简述CSS3中 transition属性值及含义 ?

CSS3中的transition属性是用来控制元素从一种样式渐变到另一种样式的时间及方式。它是一个简写属性,用来设置四个单独的过渡属性,包括 transition-propertytransition-durationtransition-timing-functiontransition-delay

例如,下面的代码:

div {
  transition: background-color 2s ease-in-out 1s;
}

这里的各个值的含义如下:

  • transition-property: 指定应用过渡效果的CSS属性名称。在上述例子中,这个属性是”background-color”。
  • transition-duration: 指定过渡效果花费的时间。在上述例子中,这个时间是2秒。
  • transition-timing-function: 指定过渡效果的时间曲线。在上述例子中,这个时间曲线是”ease-in-out”,表示过渡效果在开始和结束时速度慢,在中间速度快。
  • transition-delay: 定义过渡效果开始前的延迟时间。在上述例子中,这个延迟时间是1秒。

如果你想为一个元素的多个属性添加过渡效果,你可以用逗号分隔每个属性,如下:

div {
  transition: background-color 2s, border-radius 1s;
}

在这个例子中,背景颜色的过渡时间是2秒,边框半径的过渡时间是1秒。

发表评论

后才能评论