I want to use a simple blinking animation for something that should resemble a cursor and i just did an animation where the opacity goes from 0 to 1 with a step function infinite.
But for some reason it does not change between 0 and 1, but between 0 and 0.5-ish, i want it white on black as the text, but its grey on black. Am i not understanding animations, or is this weird behaviour? Or is there a better way to do it?
body{
background: black;
color:white;
}
.cursor::after{
content: "";
width: 0.5rem;
height: 0.2rem;
opacity: 1;
background: white;
display: inline-block;
}
.c1::after{
animation: cursorblink 1s steps(2) infinite;
}
.c2::after{
animation: cursorblink2 1s steps(2) infinite;
}
@keyframes cursorblink{
0% {opacity:0}
}
@keyframes cursorblink2{
0% {opacity:0}
100% {opacity:1}
}<span class="cursor c1"></span> <span class="cursor reference"></span> <span class="cursor c2"></span>
>Solution :
This is how steps() is supposed to work. it’s not very intuitive but what you need is one step and make the opacity: 0 at 50% (0% and 100% will by default be opacity: 1
body{
background: black;
color:white;
}
.cursor::after{
content: "";
width: 0.5rem;
height: 0.2rem;
background: white;
display: inline-block;
}
.c1::after,
.c2::after{
animation: cursorblink 1s steps(1) infinite;
}
@keyframes cursorblink{
50% {opacity:0}
}<span class="cursor c1"></span>
<span class="cursor reference"></span>
<span class="cursor c2"></span>