Text animation with css

Question

Text animation with css

Navigation

#1 by (3 votes)

-1

I need a help with CSS animation :

Show a sentence wait 2 seconds ...
Show another sentence and wait 2 seconds ...
After 2 seconds of the second sentence, return the initial animation.

<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 -->

css

asked by anonymous 11.04.2018 / 18:28

1 answer

Why does background-color only work with overflow: hidden? Error to print on screen a name in C, using threaded list

score 3 · Accepted Answer

As you did not give many details of how I wanted the animation I made two options.

One with the phrase making a Fade-In and another with the phrase entering the screen over the other. The examples are simple, but I think it will give you a north ...

Example making 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>

Example by making a sentence come over the other

.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>

Mozilla documentation on the @keyframes I used to do the animation. link