Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Não consegui fazer com que a animação parasse

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Transições e animações e atividade Pausando animações

por Jessica Marques
| 69.3k xp | 51 posts

Ao executar a atividade, não consegui fazer a animação parar quando passo o mouse por cima das palavras. Podem me ajudar a identificar o que está errado?

techo no css:


.texto_ola {
    margin-left: 11.25rem;
    padding-top: 7.5rem;
    animation: flutua 1s infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    position: relative;
}

.texto_ola:hover em {
    animation-play-state: paused;
}

@keyframes flutua {
    from {
        top: -5px;
    }
    to {
        top: 5px;
    }
}

trecho no html

 <section class="secao-inicio saudacao">
            <p class="saudacao">

                <div class="texto_ola">
                    <span class="saudacao-inicio">Olá,</span>
                    <span class="nome">meu nome é </span>
                    <span class="saudacao-nome">João da Silva</span>
                </div>

                <div class="texto_ola_2">
                    <span class="saudacao-ultima-linha">e eu construo</span>
                    <span class="maravilha"><br><em>sites maravilhosos</em></span>
                </div>
                <a class="botao-index" href="bio.html">Conheça mais um pouco sobre mim</a>
        </section>

Desde já obrigada!

5 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Jessica, tudo bem?

A tag em está dentro da classe texto_ola_2. Já que você está querendo aplicar a animação nas palavras sites maravilhosos, certo? E uma observação, você separou o texto em duas classes diferentes: texto_ola e texto_ola_2, só que você está dando a estilização com a classe texto_ola que não tem a tag em. Se quiser, publica teu projeto completo pelo Github pra gente verificar melhor.

.texto_ola_2:hover em {
    animation-play-state: paused;
}

Espero ter te ajudado!

por Jessica Marques
| 69.3k xp | 51 posts

Olá! No caso eu queria parar a animação do texto_ola mesmo, mas não consegui ainda...

solução!
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Jessica, tudo bem?

Fiz umas pequenas alterções para funcionar o paused. No HTML eu acrescentei a tag em pq o span é muito genérico. Ficando assim:

   <div class="texto_ola">
                <span class="saudacao-inicio"><em>Olá,</em></span>
                <span class="nome"><em>meu nome é</em> </span>
                <span class="saudacao-nome"><em>João da Silva</em></span>
            </div>

E no CSS ficando assim:

.texto_ola em {
    color: #851944;
    font-size: 4em;
    display: inline-block;
    animation: flutua 1s infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    position: relative;
}

.texto_ola :hover em{

    animation-play-state:paused;
    cursor: pointer;
}

Implementa no seu código e me fala se ficou como queria :}

por Jessica Marques
| 69.3k xp | 51 posts

Muito obrigada pela ajuda! Fiz alguns ajustes no tamanho e na posição na página e ficou bem interessante. 

.texto_ola em {
    margin-left: 1.25rem;
    padding-top: 7.5rem;
    color: #851944;
    font-size: 1.2em;
    display: inline-block;
    animation: flutua 1s infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    position: relative;
}

.texto_ola:hover em {
    animation-play-state: paused;
    cursor: pointer;

Abraços!;)

por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Que bom que deu certo, Jessica! Disponha =]