Quero usar uma animação simples piscando para algo que se pareça com um cursor e acabei de fazer uma animação onde a opacidade vai de 0 a 1 com uma função de passo infinita.
Mas, por alguma razão, não muda entre 0 e 1, mas entre 0 e 0,5, quero branco sobre preto como texto, mas é cinza sobre preto. Não estou entendendo as animações ou esse comportamento é estranho? Ou existe uma maneira melhor de fazer isso?
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>