Exemplo
Faça um elemento mover-se gradualmente 200px baixo:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A regra @keyframes especifica o código de animação.
A animação é criado por mudando gradualmente a partir de um conjunto de estilos CSS para outro.
Durante a animação, você pode alterar o conjunto de estilos CSS muitas vezes.
Especificar quando a mudança de estilo acontecerá em por cento, ou com as palavras-chave "from" e "to" , que é o mesmo como 0% e 100%. 0% é o início da animação, 100% é quando a animação é completa.
Dica: Para um melhor suporte ao navegador, você deve sempre definir tanto a 0% e os seletores de 100%.
Note: Use as propriedades de animação para controlar a aparência da animação, e também para ligar a animação para seletores.
Suporte a navegadores
Os números na tabela especifica a primeira versão do navegador que suporta plenamente a regra.
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 4.0 -webkit- | 30,0 15,0 -webkit- 12,0 -o- |
CSS Syntax
@keyframesanimationname {keyframes-selector {css-styles;}}Valores de propriedade
| Valor | Descrição |
|---|---|
| animationname | Requeridos. Define o nome da animação. |
| keyframes-selector | Requeridos. Porcentagem da duração da animação. Os valores legais: 0-100% Note: Você pode ter muitos keyframes-seletores em uma animação. |
| css-styles | Requeridos. Uma ou mais propriedades legais de estilo CSS |
mais Exemplos
Exemplo
Adicionar muitos seletores de quadro-chave em uma animação:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Tente você mesmo " Exemplo
Alterar muitos estilos CSS em uma animação:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Tente você mesmo " Exemplo
Muitos seletores quadro-chave com muitos estilos CSS:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
Tente você mesmo " Páginas relacionadas
Tutorial CSS3: CSS3 animações