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

A animação das palavras termina de forma brusca

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

por Kaique Xavier Atalla
| 86k xp | 28 posts

Amigos, bom dia!

Ao fazer a animação da classe .palavras, assim como foi sugerido no exercicio, eu consegui que elas aparecessem sem opacidade e com scale de 0.001. porém, ao final da animação elas "pulam" para o tamanho original, de uma forma brusca, bem feia. Como posso fazer para que essa transição ocorra do 0% a 100% de forma linear? (como podem ver já inclui o atributo linear na tag animation e não resolveu.)

Obrigado!

.titulo-principal {

    background-size: 100% 200px;
    background-repeat: no-repeat;
    position: relative;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

body {
    perspective: 6px;
    perspective-origin: 50% 160px;
}

.palavras, .titulo-principal {
    transform-style: preserve-3d;
}

.foto-home {
    height: 200px;
    border-radius: 50%;
}
.saudacao p {
    font-size: 1.5em;
    color: #99A;
    line-height: 1;
    padding: 2em;
}

.saudacao:hover em,
.saudacao:focus em{
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}
.saudacao-inicio {
    font-size: 3em;
    color: #889;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}
.saudacao strong {
    font-size: 2em;
    color: #000;
}
.saudacao em {
    color: #851944;
    font-size: 4em;
    display: inline-block;
    transform: rotate(-5deg)  skew(-10deg);
    -webkit-animation: flutua 2s;
    animation: flutua .5s infinite;
    position: relative;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;

}

@keyframes flutua{
    0%{
        top:-5px;
    }
    100%{
        top:5px;
    }
}

-webkit-@keyframes flutua{
    0%{
        top:-5px;
    }
    100%{
        top:5px;
    }
}

.banner-twitter {
    width: 16em;
    line-height: 1;
    padding: 1em 0;
    box-sizing: border-box;

    text-align: center;
    text-decoration: none;
    background-color: #3C1D3D;
    color: white;
    border: .25em solid black;

    font-size: 1.2em;
    font-family: "Open Sans Condensed", sans-serif;

    position: absolute;
    bottom: 110%;
    right: 0;
    transform-origin: 0 0;
    transform: translate(calc(.707*(3.5em - 100%) + 100%), calc(.707*3.5em)) rotate(45deg);
    -webkit-animation: aparece .5s;
    animation: aparece .5s;
    animation-delay: 2s;
    animation-fill-mode:backwards;

}

.subtitulo-principal a{
    text-align: center;
    text-decoration: none;
    color: #FFF;    
    font-size: 1em;

}


.botao-index {
    font-size: 1.25em;
    background-color: #851944;
    color: #FFF;
    padding: .5em;
    border: .2em solid black;
    width: 40ch;
    margin: 2em auto;
    display: block;
    text-align: center;
    transition:.5s;
}


.secao-inicio {
    padding: 2em;
}
.secao-inicio h2 {
    font-size: 3em;
    text-transform: uppercase;
    margin-bottom: .5em;
}
.trabalhos {
    background-color: #3C1D3D;
    border-top: .5em solid #000;
    border-bottom: .5em solid #000;
    background-image:linear-gradient(135deg, transparent, transparent 14px, rgba(0,0,0,.1) 14px, rgba(0,0,0,.1) 15px, transparent 15px, transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
}
.trabalhos h2 {
    color: #FFF;
}
.trabalhos ul {
    overflow: hidden;
    border: .5em solid black;
}
.trabalhos li {
    float: left;
    width: 33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;
}
.blog {
    background-color: #999;
    background-image:linear-gradient(45deg, transparent, transparent 14px, rgba(255, 255, 255, 0.1) 14px, rgba(255, 255, 255, 0.1) 15px, transparent 15px, transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
    position: relative;
    color: #FFF;
    border-bottom: .5em solid #851944;
}
.blog small {
    position: relative;
    top: -2em;
}
.blog li {
    width: 30%;
}
.blog li a {
    color: #FCF;
    padding: .5em;
    display: block;
}
footer {
    background-color: #000;
    color: #FFF;
    padding: 2em;
}
footer h2 {
    font-size: 3em;
}
footer a {
    color: #F99;
}
main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}
.palavra-home {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    position: absolute;
    font-size: 400%;
}

.palavras {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-animation: aparece 2s linear;
    animation: aparece 2s linear;
    animation-timing-function: ease-in-out;

}

-webkit-@keyframes aparece{
    from{
        opacity: 0;
        transform: scale(0.001);
    }
    to{
        opacity: 1;
    }

}

@keyframes aparece{
    from{
        opacity: 0;
        transform: scale(0.001);
    }

}


.eficiencia {
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
    opacity: .8;
}

.boas-praticas {
    top: 70%;
    left: 20%;
    transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
    opacity: .3;
}

.codigo-limpo {
    top: 45%;
    left: 25%;
    transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25);
    opacity: .6;
}

.css3 {
    top: 55%;
    left: 35%;
    transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25);
    opacity: .6;
}

.html5 {
    top: 30%;
    left: 65%;
    transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    opacity: .6;
}

.javascript {
    top: 15%;
    left: 60%;
    transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(.25);
    opacity: .3;
}

.acessibilidade {
    top: 30%;
    left: 35%;
    transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(.25);
    opacity: .8;
}

.responsivo {
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(.25);
    opacity: .8;
}

.otimizacoes {
    top: 70%;
    left: 65%;
    transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(.25);
    opacity: .6;
}

.agilidade {
    top: 75%;
    left: 35%;
    transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(.25);
    opacity: .3;
}

.design {
    top: 40%;
    left: 60%;
    transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
    opacity: .5;
}


.blog .inicio-post {
    position: absolute;
    top: 4em;
    height: 8.75em;
    left: 30%;
    right: 4em;
    background-color: #F2FFFC;
    color: #000;
    padding: 1.5em;
    display:none;
}

.blog a:hover + .inicio-post,
.blog a:focus + .inicio-post {
    display: block;
}

.botao-index:hover,
.botao-index:focus {
    box-shadow: 0 0 1em #FA9;
    background-color: #C54974;
    color: white;
}
.blog .mais-recente {
    background-color: #F2FFFC;
}
.blog .mais-recente a {
    color: #F26;
}
7 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Olá, Kaique Xavier, tudo bom? Você poderia me mandar um zip, ou a url do github com o código do seu projeto?

por Luis Felipe Alves Magro
| 154k xp | 58 posts
Desenvolvedor Front End

ficou difícil entender por que tem muito código jogado na tela. pelo que eu entendo, basta vc usar a propriedade do css 3 "transition"

A propriedade transition possui quatro propriedades para você configurar:

-transition-property -transition-duration -transition-timing-function -transition-delay

por Kaique Xavier Atalla
| 86k xp | 28 posts

Fala Mário, tudo bem?

Segue a url do Github: https://github.com/X-X-Xavito/Cursos-Alura/tree/master/HTML%20e%20CSS3%20II/Aula%206

Aviso que é a primeira vez que uso o Github, então não está o repositório mais organizado do mundo haha

E Luis, eu usei essas quatro propriedades e mesmo assim ficou estranho.

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Kaique tudo bom? Eu estou bem e vou ficar mais feliz se minha resposta ti ajudar :)

Bom eu consegui pegar o código lá no GitHub certinho, sempre tem uma primeira vez para tudo haha' (Se quiser aprender mais coisas, depois da uma olhada no curso de Git aqui da Alura)

Bom, vamos direto para a solução do problema:

Eu notei que você aplicou a animação no elemento pai:

.palavras {
  -webkit-animation: aparece 2s linear;
    animation: aparece 2s linear;
    animation-timing-function: ease-in-out; /*Esse cara aqui está sobreescrevendo o linear*/
}

A sua ideia para fazer a animação ficou bem legal

-webkit-@keyframes aparece {
    from {
        opacity: 0;
        transform: scale(0.001);
    }
    to {
        opacity: 1;
    }
}

@keyframes aparece {
    from {
        opacity: 0;
        transform: scale(0.001);
    }
}

O primeiro ponto para resolver é, remover o "to{ }" assim quando a animação completar ela irá automaticamente para a propriedade que está definida no elemento.

Agora problema real aqui, é que o CSS por algum motivo, quando você combina opacidade com o transform, está dando algum erro dele mesmo e está falhando ao calcular o tamanho dos elementos filhos que possuem scale fazendo o gap da transição que você mencionou.

Sendo assim basta deixar a animação aparece sem opacidade e criar uma apareceFilho: 

.palavra-home {
  animation: apareceFilho 2s linear;
}
@keyframes apareceFilho {
  from {
    opacity: 0;
  }
}
por Kaique Xavier Atalla
| 86k xp | 28 posts

Eu fiz isso e deu certo! Obrigado!

Mas eu tenho uma dúvida. A animação apareceFilho é definida com opacidade, mas eu não inseri ela em nenhuma tag. Achei que teria colocar ela em algum lugar. Você pode me explicar?

solução!
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Opa, foi uma falha minha Kaique, o apareceFilho tem que ser atribuída no elemento filho que é o .palavra-home, já corrigi na minha resposta.

Tudo certo? /o

por Kaique Xavier Atalla
| 86k xp | 28 posts

Tudo certo!

Muito obrigado!!!!!