CSS3 @keyframes regras
Exemplos
Faça um elemento div move-se gradualmente 200 pixels:
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
tente »
Na parte inferior desta página para mais exemplos.
Suporte a navegadores
属性 | |||||
---|---|---|---|---|---|
@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- |
definições e instruções tag
Use regras @keyframes, você pode criar animação.
Criando uma animação alterando gradualmente a definição de um estilo CSS para outro.
Durante a animação, você pode mudar o estilo CSS definir horários.
Uso ocorre quando uma alteração especificada em%, ou palavra-chave "de" e "a", e esta é a de 0% a 100% idêntica.
0% é o início da animação, 100% quando a animação é completa.
Para suporte ideal navegador, você deve sempre ser definido como 0% e 100% do selector.
Nota: Utilize apropriedade de animação para controlar a aparência da animação também é usado para selecionar a animação bind. .
gramática
valor | explicação |
---|---|
animationname | Necessário. Definir o nome de animação. |
keyframes-selector | Necessário. A duração percentagem da animação. valor legal: 0-100% Nota: Você pode usar uma animação keyframes-seletores. |
CSS-estilos | Necessário. Um ou mais atributos legítimos estilo CSS |
exemplos on-line
Exemplos
Muitos dos seletor de chave de quadro para adicionar um filme:
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
tente »
Exemplos
Alterar muitos estilos CSS em uma animação:
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
tente »
Exemplos
Muitos seletores quadro-chave com muitos estilos CSS:
{
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;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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 »
artigos relacionados
CSS3 Tutorial: CSS3 Animação