According to the documenation steps(2,start) will give this timing output:
So you will spend 0 time on the first state, half the time on the 50% (light blue) and half the time on the 100% (blue). You will have a similar logic using end instead of start where you will spend 0 time on the last state. Actually what you are looking for is the frames function but it's actually under draft and using frames(2) you will do exactly what you want:
An easy fix is to change the values of the keyframes to force each color to stay half the animation without using steps
.switch {
width: 100px;
height: 100px;
border: 5px solid white;
animation: switch-animation 2s infinite linear;
}
@keyframes switch-animation {
0%,50% {
border-color: white;
}
50.1%,100% {
border-color: blue;
}
}
<div class="switch"></div>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
