css动画有两个步骤，没有转换

我正在制作一个css动画来切换元素的背景颜色。css动画有两个步骤，没有转换

此动画只有两个阶段，两个阶段之间没有平滑过渡。

这意味着，前50％的动画，背景颜色将是blue，以及动画的最后50％，背景颜色将为grey，而不会在两者之间进行转换。

这里是完全正常的动画：

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    animation: bg 4s linear infinite; 
 
} 
 

 
@keyframes bg { 
 
    0% { 
 
    background: blue; 
 
    } 
 
    50% { 
 
    background: blue; 
 
    } 
 
    50.00001% { 
 
    background: grey; 
 
    } 
 
    100% { 
 
    background: grey; 
 
    } 
 
}

<div></div>

我不知道是否有做一个简单的方法。我正在寻找的是在keyframes内只使用from和to，而不需要任何额外的步骤。

来源

2016-11-26 Jordan Aslam

如果任何解决方案在帮助你，它标记通过点击相应的答案侧面的刻度所接受。 – Harry

您可以使用animation-timing-function: steps(1)来实现它，如下面的代码片段所示。您可以在MDN中找到有关animation-timing-functionhere和通用steps值here的更多详细信息。

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    animation: bg 4s steps(1) infinite; 
 
} 
 

 
@keyframes bg { 
 
    0% { 
 
    background: blue; 
 
    } 
 
    50% { 
 
    background: grey; 
 
    } 
 
}

<div></div>

注：我在50%而不是100%设置grey颜色关键帧由于this answer讨论了这个问题。

来源

2016-11-26 11:38:32 Harry

您也可以使用快捷符号：

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    animation: bg 4s linear infinite; 
 
} 
 

 
@keyframes bg { 
 
    from, 50% { 
 
    background: blue; 
 
    } 
 
    50.00001%, to { 
 
    background: grey; 
 
    } 
 
}

<div></div>

来源

2016-11-26 14:16:42 vals

css动画有两个步骤，没有转换

回答

相关问题