PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

21/11/2017

Efeitos CSS3 - Animações

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:

<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

image

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

0 comentários:

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics