CSS3 animações
animações CSS3 permite animação da maioria dos elementos HTML sem o uso de JavaScript ou Flash!
Animação
Suporte navegador para animações
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz- , ou -o- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Quais são CSS3 animações?
Uma animação permite que um elemento mudar gradualmente a partir de um estilo para outro.
Você pode mudar quantas propriedades CSS que quiser, quantas vezes quiser.
Para usar animação CSS3, você deve primeiro especificar alguns quadros-chave para a animação.
Keyframes manter o que os estilos o elemento terá em determinados momentos.
O @keyframes Regra
Ao especificar estilos CSS dentro do @keyframes regra, a animação vai mudar gradualmente a partir do estilo atual para o novo estilo em determinados momentos.
Para se ter uma animação para o trabalho, você deve ligar a animação a um elemento.
O exemplo a seguir vincula o "exemplo" de animação ao <div> elemento. A vontade de animação tem a duração de 4 segundos, e ele irá gradualmente mudar a cor de fundo do <div> elemento de "vermelho" para "amarelo":
Exemplo
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Tente você mesmo " Nota: Se a animation-duration propriedade não for especificada, a animação não terá nenhum efeito, porque o valor padrão é 0.
No exemplo acima, temos especificado quando o estilo vai mudar usando as palavras-chave "from" e "to" (que representa 0% (início) e 100% (completo)).
Também é possível utilizar por cento. Usando por cento, você pode adicionar quantos mudanças no estilo de como você gosta.
O exemplo a seguir irá alterar a cor de fundo do <div> elemento quando a animação é de 25% completo, 50% completo, e novamente quando a animação está 100% concluída:
Exemplo
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Tente você mesmo " O exemplo a seguir irá alterar tanto o background-color e da posição do <div> elemento quando a animação é de 25% completo, 50% completo, e novamente quando a animação está 100% concluída:
Exemplo
/* The animation code */
@keyframes example
{
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Tente você mesmo " Retardar uma animação
A animation-delay propriedade especifica um atraso para o início de uma animação.
O exemplo que se segue tem um atraso de 2 segundos, antes de iniciar a animação:
Exemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} Tente você mesmo " Definir Quantas vezes uma animação deve ser executado
A animation-iteration-count propriedade especifica o número de vezes que uma animação deve ser executado.
O exemplo a seguir irá executar a animação 3 vezes antes de parar:
Exemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} Tente você mesmo " O exemplo a seguir usa o valor " infinite " para fazer a animação continuará para sempre;
Exemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} Tente você mesmo " Executar Animação em sentido inverso, ou ciclos alternados
A animation-direction propriedade é usada para permitir que um prazo de animação em sentido inverso, ou ciclos alternados.
O exemplo a seguir irá executar a animação em sentido inverso:
Exemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} Tente você mesmo " O exemplo a seguir usa o valor "alternate" para fazer a animação primeiro correr para a frente, depois para trás, depois para a frente:
Exemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} Tente você mesmo " Especifique o Curve velocidade da animação
A animation-timing-function propriedade especifica a curva de velocidade da animação.
A propriedade-timing-function animação pode ter os seguintes valores:
-
ease- especifica uma animação com um início lento, em seguida, rapidamente, em seguida, terminar lentamente (este é o padrão) -
linear- especifica uma animação com a mesma velocidade do início ao fim -
ease-in- especifica uma animação com um início lento -
ease-out- especifica uma animação com um final lento -
ease-in-out- especifica uma animação com um início lento e no final -
cubic-bezier(n,n,n,n)- permite definir seus próprios valores em uma função cúbica-bezier
O exemplo a seguir mostra a algumas das diferentes curvas de velocidade que podem ser utilizados:
Exemplo
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;} Tente você mesmo " Animação Taquigrafia Property
O exemplo abaixo utiliza seis das propriedades de animação:
Exemplo
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Tente você mesmo " O mesmo efeito de animação como acima pode ser alcançado utilizando a forma abreviada animation propriedades:
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 » Exercício 6»
Propriedades CSS3 Animação
A tabela a seguir lista o @keyframes regra e todas as propriedades de animação:
| Propriedade | Descrição |
|---|---|
| @keyframes | Especifica o código de animação |
| animation | Um atalho para definir todas as propriedades de animação |
| animation-delay | Especifica um atraso para o início de uma animação |
| animation-direction | Especifica se uma animação deve desempenhar no sentido inverso, ou ciclos alternados |
| animation-duration | Especifica quantos segundos ou milissegundos uma animação leva para completar um ciclo |
| animation-fill-mode | Especifica um estilo para o elemento quando a animação não está jogando (quando ele for concluído, ou quando ele tem um atraso) |
| animation-iteration-count | Especifica o número de vezes que uma animação deve ser jogado |
| animation-name | Especifica o nome do animação @keyframes |
| animation-play-state | Especifica se a animação está em execução ou em pausa |
| animation-timing-function | Especifica a curva de velocidade da animação |