现在我正在通过改变文本框的背景颜色和悬停时的字体颜色来设计文本框的样式:
transition: background-color 1s, color 1s;
现在我想使用transition-delay来改变背景颜色之后的颜色。问题是transition-delay不接受我想延迟的属性(即颜色)。有没有办法只延迟特定的属性?
kkbh8khc1#
“转移延迟”是性质特有的。比如说
transition: background-color 1s linear 2s, color 1s; transition: property name | duration | timing function | delay
使用速记时,似乎还需要指定计时函数。(Source)(英文)
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; }
dfddblmv3#
好消息是您可以为特定的css属性配置转换参数,例如transition-delay、transition-duration等。坏消息是您不能为同一个元素的不同css属性指定不同的参数。例如,这是行不通的:
transition-delay
transition-duration
.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的动画。代码有点复杂,但你可以更自由地应用时间,持续时间等。
@keyframes
3条答案
按热度按时间kkbh8khc1#
“转移延迟”是性质特有的。
比如说
使用速记时,似乎还需要指定计时函数。
(Source)(英文)
z3yyvxxp2#
dfddblmv3#
好消息是您可以为特定的css属性配置转换参数,例如
transition-delay
、transition-duration
等。坏消息是您不能为同一个元素的不同css属性指定不同的参数。例如,这是行不通的:在这种情况下,我建议使用
@keyframes
的动画。代码有点复杂,但你可以更自由地应用时间,持续时间等。