Eva é uma robô meiga, fofa, maravilhosa, criada pela Pixar. Como boa fã, da Pixar, e do CSS, criei uma fanart dela usando formas em CSS. Nesse tutorial será mostrado como adicionar animações na ilustração, então nossa Eva ganhará vida.

Todos os exemplos dessa postagem estão disponíveis no Codepen. Você pode ler mais sobre animações no meu guia de bolso ou em outras postagens aqui mesmo no blog.

Montando o esqueleto as peças

Eva foi montada com classes em HTML e formas geométricas estilizadas com CSS. O foco nesse tutorial é falar sobre as animações. Então vou assumir que você já sabe criar formas assim, mas se não souber ainda, você pode conferir outros posts sobre isso e aprender aqui.

See the Pen Eva 00 by Dalianny Vieira (@daliannyvieira) on CodePen.

Primeiros passos voos

Nossa Eva não foi construída com pés ou rodinhas. Ela precisa flutuar para voar por aí. Usando a propriedade animation vamos animar a classe responsável mostrar seu corpo.

O código acima diz ao navegador que queremos que nossa Eva ganhe uma animação chamada up, flutue em um espaço de tempo de 0.4segundos, de forma infinita (não queremos que ela pare, não é? hihi), usando a função de tempo ease-in-out, em direção alternate, fazendo com que ela entre em um looping bonitinho e contínuo.

Cada animação precisa ser definida com um @keyframe, que diz quando, onde e como uma propriedade deve ser animada.

Nosso código diz apenas que quando nossa animação chegar em 100% Eva deve se movimentar até o ponto -25px no eixo Y, em um plano cartesiano, da página.

Agora Eva já flutua, mas para deixar a composição dela mais realista, precisamos modificar também sua sombra. Afinal, agora ela está se afastando do chão, e a sombra projetada sob ela precisa ser animada também. A animação shadow possui a mesma duração, iteração, função de tempo e direção da up.

Mas agora, ela não se movimenta, apenas tem o tamanho de sua largura transformada, em uma escala de 1.2.

See the Pen Eva 01 by Dalianny Vieira (@daliannyvieira) on CodePen.

Movimentando os braços

A animação arm-left possui a mesma duração, iteração, função de tempo e direção da up e shadow.

O @keyframe, por sua vez, diz ao navegador que a animação ao alcançar 100% de sua duração deve fazer a forma arm-left (braço esquerdo) girar em 25 graus.

A animação arm-right possui a mesma duração, iteração, função de tempo e direção da arm-left. Mas seu @keyframe diz que ela deve girar em -25 graus.

See the Pen Eva 02 by Dalianny Vieira (@daliannyvieira) on CodePen.

Ganhando emoções

Nossa Eva já consegue flutuar por aí, e mexer seus bracinhos. Mas ainda não parece sentir emoções. Para deixa-la mais empática, vamos adicionar animações também em seus olhos.

A animação eye-left tem a mesma iteração, função de tempo e direção das anteriores, mas, sua duração é de 2 segundos.

E seu @keyframe diz que ela deve girar em -22 graus.

A animação eye-right tem a mesma duração, iteração, função de tempo e direção da eye-left.

Enquanto seu @keyframe, por sua vez, indica que ela deve girar em 22 graus.

Fim! Se você acompanhou esse post até aqui, muito obrigada! Você acompanhou uma robô fofinha ganhar vida! ♥ E uma geek se divertir muito no processo.

See the Pen Eva 03 by Dalianny Vieira (@daliannyvieira) on CodePen.