My objective is to create an animation that causes text to invert color between its background and its own color. Currently, the animation successfully flips the colors the first time, but struggles to transition back to the default colors, resulting in a muddled color in between. Here is the CSS code I am using for the animation:
body {
background: #3866af;
color: #ffebb5;
}
.blink {
animation: blink-animation 1s steps(2, start) infinite;
}
@keyframes blink-animation {
from {
background: #3866af;
color: #ffebb5;
}
to {
background: #ffebb5;
color: #3866af;
}
}This is how text would normally look
<br>
<span class="blink">and this is what blinking text looks like right now</span>My goal is for the text to turn blue and have a beige background.
I am striving to achieve this effect using CSS alone, without resorting to JavaScript.
Thanks!
EDIT:
The solution I have decided to implement is based on Farhad Bagherlo's answer:
body {
background: #3866af;
color: #ffebb5;
}
.blink {
animation: blink-animation 1s steps(2, start) infinite;
}
@keyframes blink-animation {
0% {
background-color:#3866af;
color: #ffebb5;
}
50% {
background-color:#3866af;
color: #ffebb5;
}
51% {
background-color: #ffebb5;
color:#3866af;
}
100% {
background-color: #ffebb5;
color:#3866af;
}
}This is how text would normally look
<br>
<span class="blink">and this is what blinking text looks like right now</span>