Executando verificação de segurança...
1

Animações no nextJs

Fiz uma animação simples de opacidade -

.myNameDisplayBlock::after {
  content: "|";
  margin-left: 5px;
  animation: blinkArrow 0.7s infinite;
}

@keyframes blinkArrow {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

Mas por algum motivo NÃO ESTÁ FUNCIONANDO NO CHROME, já testei no FIREFOX e nele funciona, estou usando nextJs, não se interfere em algo.

Carregando publicação patrocinada...
1
0

Descobri!! Por algum motivo no CHROME tenho que fazer o CSS assim:

.myNameDisplayBlock::after {
  content: " ";
  display: inline-block;
  width: 3px;
  height: 30px;
  margin-left: 5px;
  animation: blinkArrow 0.7s infinite;
  background-color: var(--color-blue1);
}

Caso eu bote apenas content: "|" não funciona.