TRANSIÇÕES E ANIMAÇÕES EM CSS3

Durante muito tempo o CSS só serviu para pintar quadradinhos e mais nada. Desde quando o pessoal do WaSP organizou todo o movimento dos Padrões Web fazendo com que todos os desenvolvedores, fabricantes de browsers e até mesmo o W3C acreditassem no poder dos padrões não houve grandes atualizações no CSS. Praticamente formatávamos font, background, cor, tamanhos e medidas de distância e posição.
A propriedade transition, a regra keyframe e outras propriedades vieram vitaminar a função que o CSS tem perante o HTML acrescentando maneiras de produzirmos animações e transições. Não estou dizendo que você fará animações complicadas, com diversos detalhes técnicos e etc. Para esse tipo de resultado existem outras ferramentas, incluindo Canvas e SVG, que com certeza farão um trabalho melhor com menos esforço. Mas é fato que as animações via CSS nos ajudará a levar a experiência do usuário para outro patamar.
Lembrando que o nível de suporte de algumas dessas técnicas ainda é muito baixo. A propriedade transition funciona em boa parte dos browsers atuais. Mas a regra keyframe que nos permite controlar as fases de uma animação ainda é muito restrito. Para uma tabela mais atual e detalhada de suporte e compatibilidade, faça uma procura no Google. Onde for possível demonstrarei o código com o prefixo dos browsers que suportam as propriedades.

O básico: propriedade transition

A propriedade transition é praticamente auto-explicativa. Sua sintaxe tão simples que talvez até dispense explicações mais elaboradas. Vamos começar com o código abaixo:

a {
color: white;
background: gray;
}

No código definimos que o link terá sua cor de texto igual a preta e seu background será cinza.

O resultado esperado é que ao passar o mouse no link a cor do texto seja modificada, mudando do branco para o preto e que a cor de background mude de cinza para vermelho. O código abaixo faz exatamente isso:

a {
color: white;
background: gray;
}
a:hover {
color: black;
background: red;
}

O problema é que a transição é muito brusca. O browser apenas modifica as características entre os dois blocos e pronto. Não há nenhuma transição suave entre os dois estados.

Podemos fazer a mudança de um estado para outro utilizando a propriedade transition. Suponha que ao passar o mouse, as mudanças acontecessem em um intervalo de meio segundo. Bastaria colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as características do link com uma pequena transição de meio segundo. O código seria como se segue abaixo:

a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

Dessa forma a transição apenas acontece quando o hover é ativado. O problema é que ao tirar o mouse, o browser volta bruscamente para as características iniciais. Para modificar isso basta inserir também a propriedade transition no estado inicial.

a {
color: white;
background: gray;
-webkit-transition: 0.5s;
}
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

O que a propriedade transition faz é comparar os valores das propriedades em comum entre os dois estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando há a ativação da função. Esta é uma técnica simples e que serve para manipularmos transições básicas como cor, tamanho, posição etc.

Agora suponha que em um bloco há uma determinada propriedade que no outro bloco não há, como no código abaixo:

a {
border:1px solid orange;
color: white;
background: gray;
-webkit-transition: 0.5s;
}
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

Nesse caso o browser detecta que há uma propriedade no primeiro estado, mas não no segundo, por isso ele não faz a transição desta propriedade, apenas das propriedades em comuns.

Abaixo veja o código. copie em um arquivo HTML e veja o efeito:

1:  <!DOCTYPE html>
2:  <html lang=”pt-br>
3:  <head>
4:  <meta charset=”utf-8>
5:  <title>CSS Transition</title>
6:  <style type=”text/cssmedia=”screen>
7:  a {
8:  color:white;
9:  background:gray;
10:  -webkit-transition: 0.5s linear;
11:  }
12:  a:hover {
13:  color:black;
14:  background:red;
15:  -webkit-transition: 0.5s linear;
16:  }
17:  </style>
18:  </head>
19:  <body>
20:  <a href=”#”>Link! Hello World!</a>
21:  </body>
22:  </html>

Propriedade animation e regra keyframe

A propriedade trasition trabalha de forma muito simples e inflexível. Você praticamente diz para o browser qual o valor inicial e o valor final para que ele aplique a transição automaticamente, controlamos praticamente apenas o tempo de execução. Para termos mais controle sobre a animação temos a propriedade animation que trabalha juntamente com a rule keyframe.

Basicamente você consegue controlar as características do objeto e suas diversas transformações definindo fases da animação. Observe o código abaixo e veja seu funcionamento:

@-webkit-keyframes rodar {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}

O código acima define um valor inicial e um valor final. Agora vamos aplicar esse código a um elemento. Minha ideia é fazer um DIV girar. 😉

O código HTML até agora é este. Fiz apenas um div e defini este keyframe:

1:  <!DOCTYPE html>
2:  <html lang=”pt-br>
3:  <head>
4:  <title></title>
5:  <meta charset=”utf-8>
6:  <style>
7:  @-webkit-keyframes rodaroda {
8:  from {
9:  -webkit-transform:rotate(0deg);
10:  }
11:  to {
12:  -webkit-transform:rotate(360deg);
13:  }
14:  }
15:  </style>
16:  </head>
17:  <body>
18:  <div></div>
19:  </body>
20:  </html>

Primeiro você define a função de animação, no caso é o nosso código que define um valor inicial de 0 graus e um valor final de 360 graus. Agora vamos definir as características deste DIV.

div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
}

Nas primeiras linhas defini qual será o estilo do div. Ele terá uma largura e uma altura de 50px. A margin de 30% do topo garantirá um espaço entre o objeto e o topo do documento, e background preto.

A propriedade animation tem uma série de propriedades que podem ser resumidas em um

shortcode bem simples. Veja a tabela logo a seguir para entender o que cada propriedade significa:

Propriedade Definição
animation-name Especificamos o nome da função de animação
animation-duration Define a duração da animação. O valor é declarado em segundos.
animation-timing-function Descreve qual será a progressão da animação a cada ciclo de duração. Existem uma série de valores possíveis e que pode ser que o seu navegador ainda não suporte, mas são eles: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(<number>, <number>, <number>, <number>) [, ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(<number>, <number>, <number>, <number>)]*O valor padrão é ease.
animation-interation-count Define o número de vezes que o ciclo deve acontecer. O padrão é um, ou seja, a animação acontece uma vez e pára. Pode ser também infinito definindo o valor infinite no valor.
animation-direction Define se a animação irá acontecer ou não no sentido inverso em ciclos alternados. Ou seja, se a animação está acontecendo no sentido horário, ao acabar a animação, o browser faz a mesma animação no elemento, mas no sentido anti-horário. Os valores são alternate ou normal.
animation-play-state Define se a animação está acontecendo ou se está pausada. Você poderá por exemplo, via script, pausar a animação se ela estiver acontecendo. Os valores são running ou paused.
animation-delay Define quando a animação irá começar. Ou seja, você define um tempo para que a animação inicie. O valor 0, significa que a animação começará imediatamente.

Voltando para o nosso código, vamos aplicar algumas dessas propriedades:

div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
-webkit-animation-name: rodaroda;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}

Veja que na propriedade animation-name chamamos o mesmo nome que demos na nossa função de keyframe logo no começo da explicação. Depois definimos uma duração de ciclo de meio segundo. Definimos que o comportamento da animação será linear, e com a propriedade animation-iteration-count definimos que ele girará infinitamente. E por último definimos pelo animation-direction que a animação deverá ser alternada, ou seja, o DIV girará para um lado, e quando alcançar o final da animação, o browser deverá alternar essa animação.

Podemos melhorar esse código utilizando a versão shortcode, que é mais recomendado. Veja a ordem que devemos escrever as propriedades animation em forma de shortcode:

animation: [<animation-name> |
| <animation-duration> |
| <animation-timing-function> |
| <animation-delay> |
| <animation-iteration-count> |
| <animation-direction>] [, [<animation-name> |
| <animation-duration> |
| <animation-timing-function> |
| <animation-delay> |
| <animation-iteration-count> |
| <animation-direction>] ]*

Aplicando isso ao nosso código:

div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
-webkit-animation: rodaroda 0.5s linear infinite alternate;
}

Pronto. Agora temos um elemento que gira sem parar, hora para direita hora para esquerda.

Definindo ciclos

Nós definimos no keyframe do nosso último exemplo apenas um início e um fim. Mas e se quiséssemos que ao chegar na metade da animação o nosso elemento ficasse com o background vermelho? Ou que ele mudasse de tamanho, posição e etc.? É aí onde podemos flexibilizar melhor nosso keyframe definindo as fases da animação. Por exemplo, podemos dizer para o elemento ter uma cor de background diferente quando a animação chegar aos 10% do ciclo, e assim por diante.

Veja o exemplo:

@-webkit-keyframes rodaroda {
0% {
-webkit-transform:rotate(0deg);
}
50% {
background:red;
-webkit-transform:rotate(180deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}

Definimos acima que o início da animação o elemento começará na posição normal, 0 graus.

Quando a animação chegar aos 50% do ciclo, o elemento deverá ter girado para 180 graus e o background dele deve ser vermelho. E quando a animação chegar a 100% o elemento deve ter girado ao todo 360 graus e o background, como não está sendo definido, volta ao valor padrão, no nosso caso black, que foi definido no CSS onde formatamos este DIV.

Logo nosso elemento girará pra sempre e ficará alternando a cor de fundo de preto para vermelho. Fiz um exemplo bem simples modificando apenas o background, mas você pode muito bem definir um position e modificar os valores de left e top para fazer o elemento se movimentar.

No exemplo também defini apenas 3 estágios (0%, 50% e 100%) você pode definir um maior número de estágios: 5%, 10%, 12%, 16% e etc… Adequando as fases da animação às suas necessidades.

Há exemplos muito interessantes na internet onde podemos ver todo o poder das animações feitas pela CSS. Veja o exemplo que fizemos aqui neste texto no endereço: http://migre.me/4ubym.

Até mais.

Anúncios

5 thoughts on “TRANSIÇÕES E ANIMAÇÕES EM CSS3

  1. como eu faço pra um retangulo girar sem parar como no seu exemplo só que sempre sentido horário e sem distorcer ele pq aqui nos meus testes ele distorce

  2. Excelente Artigo Vlademir. Parabéns pelo conteúdo. Estou iniciando meus estudos em HTML5 e vi que tenho muito pela frente. Mas você explicou tudo muito bem explicado, inclusive onde inserir códigos e o porque deles. Ótimo trabalho!

  3. Agradeço a boa explicação dada aqui pois ainda tenho muito que aprender nas novas mudanças do html 5 uma vez que trabalhei muito o xhtml. Gostaria que me esclarece-se uma dúvida.Aqui foi apresentado o mdo de inserir a css, mas antes no xhtml quando desejávamos ter muitos efeitos de maneiras diferentes fazia-se mais que 1 css eu tinha por vezes 2 ou mais folhas css.aqui como é possível fazer tal?

  4. Vlademir, vc poderia me ajudar solucionar um problema? É o seguinte: não estou conseguindo aplicar o efeito de transição numa DIV contendo o efeito GRADIENTE.

    Poderia me ajudar.

    Abaixo o código:

    nav ul li a:hover {width: 8em;
    height: 6.5em;
    padding: 0 1em;
    display: block;
    background-image: -webkit-gradient(
    linear, left top, left bottom, from(rgba(80,80,80,0.2)),
    to(rgba(50,50,50,0.8)));
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s