Regra CSS @keyframes
Exemplo
Faça um elemento mover-se gradualmente 200px para baixo:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A @keyframesregra especifica o código de animação.
A animação é criada mudando gradualmente de um conjunto de estilos CSS para outro.
Durante a animação, você pode alterar o conjunto de estilos CSS várias vezes.
Especifique quando a mudança de estilo acontecerá em porcentagem ou com as palavras-chave "de" e "para", que é o mesmo que 0% e 100%. 0% é o início da animação, 100% é quando a animação está completa.
Dica: Para melhor suporte ao navegador, você deve sempre definir os seletores 0% e 100%.
Nota: Use as propriedades de animação para controlar a aparência da animação e também para vincular a animação aos seletores.
Nota: A regra !important é ignorada em um quadro-chave (veja o último exemplo nesta página).
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente a regra.
Números seguidos por -webkit-, -moz- ou -o- especificam a primeira versão que funcionou com um prefixo.
| Property | |||||
|---|---|---|---|---|---|
| @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- |
Sintaxe CSS
@keyframes animationname {keyframes-selector {css-styles;}}
Valores de propriedade
| Value | Description |
|---|---|
| animationname | Required. Defines the name of the animation. |
| keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
| css-styles | Required. One or more legal CSS style properties |
Mais exemplos
Exemplo
Adicione muitos seletores de quadro-chave em uma animação:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Exemplo
Altere muitos estilos CSS em uma animação:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Exemplo
Muitos seletores de quadro-chave com muitos estilos CSS:
@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;}
}
Exemplo
Nota: A regra !important é ignorada em um quadro-chave:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Páginas relacionadas
Tutorial CSS: Animações CSS