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:
<style>
.anima {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:gold; left:450px; top:0px;}
50% {background-color:green; left:450px; top:200px;}
75% {background-color:blue; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
< /style>
<div class="anima"></div>
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:
<style>
.anima2 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-delay: 1s;
animation-direction: alternate;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:gold; left:450px; top:0px;}
50% {background-color:green; left:450px; top:200px;}
75% {background-color:blue; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
< /style>
<div class="anima2"></div>
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
Para saber mais sobre as propriedade de animação CSS3, acesse o link: W3School
Para utilizar CSS nas páginas do site, leia nossos artigos:
Simulador CSS e HTML – Ótimo para iniciantes…
Como usar CSS no Wordpress
Simulador gratuito para HTML, CSS e JavaScript – visualização em tempo real
Como inserir códigos CSS no Blogger
Para conhecer mais sobre as propriedade de animação CSS3, acesse o link: W3School
byALF
Nenhum comentário:
Postar um comentário
Os comentários são muito bem vindos e importantes, pois enriquecem o conteúdo dos artigos.