Faaaaaaaaaaaaaaaaala galeeeera! Depois dos últimos feedbacks super positivos que recebi em relação ao nosso primeiro post da série criando vinhetas animadas em CSS, eu não poderia deixar o ano acabar sem disponibilizar um mega post para vocês.

Estou escrevendo este post assistindo Man of Tai Chi, até que está legasinho =D

Qual será nossa primeira animação?

Como foi falado no último post da série (caso você não chegou a ler, sugiro que clique aqui =D), iremos começar nossos primeiros exemplos explorarando animações nos elementos de textos.

Para começar, iremos tomar como referência o nome do nosso blog: CSS Brasil, como no gif a cima. Note que temos cada letra do 'C'S'S' se movimentando singularmente e o 'Brasil' se destacando no exemplo. Neste caso, teremos a seguinte marcação HTML:

Separamos cada letra do 'C'S'S' com uma tag "span", para poder manipular o movimento de cada uma, e o 'Brasil' deixaremos dentro de uma tag "p" para que ele fique destacado.

Assim podemos seguir para a parte mais interessante e que eu amo.

CSS <3

Começaremos colocando as tags "p" e "span" com um display: inline-block, para que os textos não quebrem de linha, e aplicaremos uma técnica de text-shadow, que funciona da seguinte maneira: offset-x | offset-y | blur-radius | color. Onde:

• offset-x: É o deslocamento da sombra no eixo-x, usando unidades de medidas. Por exemplo 1px.
• offset-y: É o deslocamento da sombra no eixo-y, usando unidades de medidas. Por exemplo 1px.
• blur-radius: O quanto de distorção que a sombra terá, quanto maior a unidade de medida informada, maior a distorção que seu texto terá.
• color: A cor da sombra, podendo ser hexadecimal, rgb, rgba, hsla, etc...

Mantemos a cor da sombra transparent, pois quando fomos transicionar a cor deste elemento, ele surgirá com um efeito blur. Como no exemplo abaixo:

Repare que no exemplo do post, estamos deslocando as sombras das letras 'C'S'S' e duplicando elas através de uma técnica de duplicação de elementos que pode ser compreendida no post box shadow e suas mágicas, escrito em meu blog pessoal. Agora vamos adicionar uma animação para que as letras 'C'S'S' apareçam com um efeito blur:

Não colocamos o estado inicial do elemento na animação, pois já está setado no seu seletor. Adicionamos a valor forwards na propriedade animation, para quando a animação terminar, ela não volte para o estado inicial.

Agora precisamos animar as letras 'C'S'S' para que fiquem subindo e descendo. Note que já existe uma animação ligada a elas (enterFromTop) e não podemos adicionar mais estados para a animação atual, pois ela só roda 1 vez, e nós queremos que as letras fiquem subindo e descendo. Logo adicionaremos mais uma animação na propriedade animation separada por vírgula, para que duas animações rodem ao mesmo tempo, no mesmo elemento:

Nossas letrinhas estarão sempre se movendo pra cima e para baixo, mas repare que elas não se movimentam alternadamente, e sim ao mesmo tempo. Isto é fácil de se resolver usando apenas um animation-delay para cada 'span':

Desta forma, teremos um atraso inicial diferente para o primeiro, segundo e terceiro 'spans'.

Animando o 'Brasil'

Até agora temos o 'C'S'S' animado, falta animar o 'Brasil' e colocar alguns efeitos especiais _ ...

Nosso texto até agora está com uma cor transparent e com um text-shadow: 0 0 221px transparent;, precisamos animá-lo a cor dele da mesma forma que fizemos com os nossos 'C'S'S':

O próximo passo é adicionar a bolinha que pinta o 'Brasil', para isto iremos cria-la utilizando o pseudo-element :after, para não poluir nosso código HTML:

As linhas CSS acima são bem simples, criamos uma bolinha pequena em cima do 'Brasil', ao seu lado direito com um fundo verde, um box-shadow mais escuro, para dar um efeito de clique na bolinha, e um transform: scale(0); para que ela fique escondida e apareça num efeito de scale.

Em seguida criaremos sua animação e atualizaremos a animação do 'Brasil', para que fique sincronizada com a animação da bolinha:

Desta forma a cor do 'Brasil' mudará na hora que a bolinha aparece, dando um efeito de pintura ao nosso texto. Note que dupliquei o text-shadow mudando a cor e o blur, para que a segunda camada de sombra fique destorcida, lembrando um efeito neon.

A parte de baixo, irei deixar como um desafio! Use as técnicas aprendidas até agora para criar as listrinhas de baixo do texto, indo e voltando. Comente no post o link do seu exemplo (pode ser no Codepen), e no próximo post da série, explicarei a solução que utilizei! \o/\o/

Um forte abraço, e até a próxima =D