Animation of texts with css

Asked

Viewed 1,651 times

-1

I need some help with animation CSS:

  • Show sentence wait 2 seconds...
  • Show another sentence and wait 2 seconds...
  • After 2 seconds of the second sentence return to 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 animation

  • Answer: https://answall.com/a/273010/99718

  • legal the solution, but I need it to be just css, no js

  • With CSS, however you would have to create a rule (using animation) for each div and maybe it doesn’t even work properly.

  • @Valdeirpsr doesn’t need many rules for this, I’ll come up with a simple example and answer here ;)

1 answer

4


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

One with the phrase making one 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 doing the 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 making one sentence entering 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>

Browser other questions tagged css animation

You are not signed in. Login or sign up in order to post.