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...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More