Efeitos CSS3 - Animações ~ Visual Dicas

Resultado de imagem para css3

Efeito Animação - CSS3

No artigo Efeitos CSS3 - Transições entre propriedades apresentamos a propriedade transition.

Neste artigo vamos falar de uma propriedade CSS3 bem legal também. Trata-se do efeito de animação, uma nova propriedade de estilo CSS que permite criar animações com blocos definidos pelas propriedades width, height e background-color.

CSS3 é a mais nova versão para as folhas de estilo Cascading Style Sheets (ou simplesmente CSS), onde podemos agora definir novos estilos para páginas web como: efeitos de transição, cantos arredondados, sombras, animações, desenhos, degrade, entre outros. Estes novos efeitos criados pelo CSS facilitaram a vida dos programadores, pois agora podemos fazer coisas de forma muito simples que precisariam de longos códigos escritos em JavaScript ou em outras linguagens.

Para compreender melhor a propriedade animation, veja o exemplo abaixo:

Atenção: Este exemplo não roda no Internet Explorer em nenhuma versão.

Usando a propriedade “animation” na prática

No nosso exemplo acima, usamos o seguinte código:

Veja passo a passo como funciona o código do nosso exemplo:

1) Primeiro vamos definir as características do elemento <div class=”anima”>, onde:

width: 100px (define a largura em pixel do nosso elemento div)

height: 100px (define a altura em pixel da nossa div)

background-color: red (define a cor do fundo da nossa div)

position: relative (define o elemento como flutuante na tela)

Ainda na classe anima, vamos definir a nossa animação:

animation-name: exemple (chamamos @keyframes denominado “exemple”)

animation-duration: 4s (tempo de cada ciclo da animação em segundos)

animation-interation-count: infinite (número de ciclos, no nosso exemplo definimos infinte, ou seja, número de ciclos indeterminado). Por exemplo, se colocasse o número 3, definiria que a animação iria durar 3 ciclos de 4 segundos.

2) Agora vamos definir os quadros da animação @keyframes exemple, onde:

0% define a posição inicial do ciclo e 100% a posição final. As demais posições 25%, 50% e 75% são posições intermediárias. Observe que dividimos o ciclo em 4 posições iguais. Entretanto, você pode criar quantas posições e da forma que desejar.

Observe que alteramos a cor do fundo (backgrround-color) nas posições 25%, 50% e 75%. As posições inicial e final são iguais as definidas inicialmente para a div class anima.

Utilizando as propriedade left e top, alteramos a posição da nossa div, em 450px na horizontal e 200px na vertical. Isto só é possível porque definimos classe da div anima como flutuante, ou seja, position: relative.

Animação alternada

No exemplo abaixo vamos utilizar mais duas propriedades de animação: animation-delay e animation-drection:

Para um melhor entendimento, veja abaixo o código completo do exemplo:

Onde usamos as novas propriedades:

animation-delay: 1s (define o tempo em segundos para começar a animação)

animation-direction: alternate (define a direção do ciclo como alternada). Você pode usar ainda animation-direction: reverse que faz a animação na direção inversa do que foi definido pela @keyframes.

Faça o teste colando os códigos acima no nosso editor HTML: Squids Editor