我制作了一个CSS动画,其中一部分是更改
的边框颜色。
我使用from和to值。边框应该闪烁白色和蓝色,但我得到的是浅蓝色而不是白色。
我制作了一个最小化的代码片段来演示这个问题。你有什么想法我做错了什么吗?
.switch {
width: 100px;
height: 100px;
border: 5px solid white;
-webkit-animation: switch-animation 2s steps(2, start) infinite;
animation: switch-animation 2s steps(2, start) infinite;
}
@keyframes switch-animation {
from {
border-color: white;
}
to {
border-color: blue;
}
}
@-webkit-keyframes switch-animation {
from {
border-color: white;
}
to {
border-color: blue;
}
}
<html>
<head></head>
<body>
<div class="switch"></div>
</body>
</html>
steps
就像这样工作。当你使用steps(2, start)
时,使用的两个步骤分别是50%和100%。使用steps(2, end)
将完全相反。NicossB的解决方案是正确的。 - FranCarstens