Início / coding / Perguntas / 77385511
Accepted
Raqha
Asked: 2023-10-30 07:10:12 +0800 CST

Valor de animação CSS interpolado em função de 2 etapas

  • 772

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>

css

1 respostas

  1. Best Answer

    É assim steps()que deveria funcionar. não é muito intuitivo mas o que você precisa é de um passo e fazer o opacity: 0at 50%( 0%e 100%será por padrãoopacity: 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>

    • 1

relate perguntas