-1

Preciso de uma ajuda com animação CSS:

  • Mostrar uma frase esperar 2 segundos...
  • Mostrar outra frase e esperar 2 segundos...
  • Após 2 segundos da segunda frase voltar a animação inicial.

<div>Frase 1 com 2 segundos...</div>
<div>Frase 2 com 2 segundos...</div>
<!-- Após mostrar segundo texto voltar animação no início -->

4
  • Resposta: pt.stackoverflow.com/a/273010/99718 11/04/2018 às 16:32
  • legal a solução, porém preciso que seja apenas css, sem js 11/04/2018 às 16:34
  • Com CSS, porém você teria que criar uma regra (utilizando animation) para cada div e talvez nem funcione corretamente. 11/04/2018 às 16:35
  • @ValdeirPsr não precisa de muitas regras para isso, vou bolar um exemplo simples e respondo aqui ;)
    – hugocsl
    11/04/2018 às 17:11

1 Resposta 1

4

Como vc não deu muitos detalhes de como queria a animação eu fiz duas opções.

Uma com a frase fazendo um Fade-In e outra com a frase entrando na tela por cima da outra. Os exemplos são simples, mas acho que vai te dar um norte...

Exemplo fazendo o Fade-In

.fade {
    font-family: sans-serif;
    font-size: 2rem;
    color: red;
    position: relative;
}
.fade::after {
    content: attr(data-text);
    position: absolute;
    color: blue;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: #fff;
    animation: fader 5s infinite linear;
}
@keyframes fader {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
<div class="fade" data-text="Minha fraze surgindo...">Minha fraze sumindo!</div>

Exemplo fazendo uma frase entrando por cima da outra

.texto {
    font-family: sans-serif;
    font-size: 2rem;
    color: red;
    position: relative;
    overflow: hidden;
    width: 320px;
}
.texto::after {
    content: attr(data-text);
    position: absolute;
    color: blue;
    top: 0;
    left: -300px;
    width: 0;
    background-color: #fff;
    animation: anima 5s infinite linear;
}
@keyframes anima {
    0% {
        left: -300px;
    }
    40% {
        left: -300px;
    }
    50% {
        left: 0px;
        width: 100%;
    }
    90% {
        left: 0px;
        width: 100%;
    }
    100% {
        left: -300px;
    }
}
<div class="texto" data-text="Minha segunda...">Minha primeira Frase!</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .