Início
Loja
A propriedade trasition trabalha de forma muito simples e flexí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 funciona
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:
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.
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 signifca:
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(, , , ) [, ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(, , , )]*. 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 antihorá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-@Censurado
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:
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-@Censurado, animation-iteration-count, animation-direction] , animation-name, animation-duration, animation-timing-function, animation-@Censurado, animation-iteration-count, animation-direction
Aplicando isso ao nosso código:
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:
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: migre.me/4ubym
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 funciona
- Código:
@-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:
- Código:
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<title></title>
<meta charset=”utf-8”>
<style>
@-webkit-keyframes rodaroda {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</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.
- Código:
div {
width:50px;
height:50px;
margin:30% auto 0;
background:black;
}
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 signifca:
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(, , , ) [, ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(, , , )]*. 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 antihorá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-@Censurado
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:
- Código:
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-@Censurado, animation-iteration-count, animation-direction] , animation-name, animation-duration, animation-timing-function, animation-@Censurado, animation-iteration-count, animation-direction
Aplicando isso ao nosso código:
- 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:
- Código:
@-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: migre.me/4ubym
Créditos:
Tableless
DeeW. por compartilhar com a WASD.
