特定属性的CSS3转换延迟

mdfafbf1  于 2022-12-05  发布在  CSS3
关注(0)|答案(3)|浏览(185)

现在我正在通过改变文本框的背景颜色和悬停时的字体颜色来设计文本框的样式:

transition: background-color 1s, color 1s;

现在我想使用transition-delay来改变背景颜色之后的颜色。问题是transition-delay不接受我想延迟的属性(即颜色)。有没有办法只延迟特定的属性?

kkbh8khc

kkbh8khc1#

“转移延迟”是性质特有的。
比如说

transition: background-color 1s linear 2s, color 1s;
transition: property name | duration | timing function | delay

使用速记时,似乎还需要指定计时函数。
Source)(英文)

z3yyvxxp

z3yyvxxp2#

li {
  transition-duration: 0.4s, 0.4s, 0.4s, 0.4s, 0.4s;
  transition-delay: 0s, 0s, 0s, 0s, 0s;
  transition-property: transform, opacity, visibility, color, background-color;
}

li:nth-of-type(1) {
  transition-delay: 0s, 0s, 0s, 0s, 0s;
}

li:nth-of-type(2) {
  transition-delay: 0.1s, 0.1s, 0.1s, 0s, 0s;
}
dfddblmv

dfddblmv3#

好消息是您可以为特定的css属性配置转换参数,例如transition-delaytransition-duration等。坏消息是您不能为同一个元素的不同css属性指定不同的参数。例如,这是行不通的:

.elem {
    transition: background-color 2s 0.5s ease; // want background-color to transition differently
    transition: opacity 3s 1.5s ease;          //this unfortunately overrides the previous line
}

在这种情况下,我建议使用@keyframes的动画。代码有点复杂,但你可以更自由地应用时间,持续时间等。

相关问题