且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在一个元素上有多个 CSS 转换?

更新时间:2022-01-22 06:45:44

在所有支持过渡的浏览器中,过渡属性都以逗号分隔:

Transition properties are comma delimited in all browsers that support transitions:

.nav a {
  transition: color .2s, text-shadow .2s;
}

ease 是默认的计时函数,所以你不必指定它.如果你真的想要linear,你需要指定它:

ease is the default timing function, so you don't have to specify it. If you really want linear, you will need to specify it:

transition: color .2s linear, text-shadow .2s linear;

这开始变得重复,因此如果您要在多个属性中使用相同的时间和计时函数,***继续使用各种 transition-* 属性而不是简写:

This starts to get repetitive, so if you're going to be using the same times and timing functions across multiple properties it's best to go ahead and use the various transition-* properties instead of the shorthand:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;