CSS3 @keyframes reglas
Ejemplos
Hacer un elemento div se mueve gradualmente 200 píxeles:
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
Trate »
En la parte inferior de esta página para más ejemplos.
Soporte para el navegador
| 属性 | |||||
|---|---|---|---|---|---|
| @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- |
definiciones de código e instrucciones
Utilice reglas @keyframes, puede crear la animación.
La creación de animación cambiando gradualmente la configuración de un estilo CSS a otro.
Durante la animación, puede cambiar los tiempos de seleccionar el estilo CSS.
Uso ocurre cuando un cambio especificado en%, o palabra clave "de" y "a", y este es el 0% y el 100% idénticos.
0% es el comienzo de la animación, 100% cuando la animación se ha completado.
Para un apoyo óptimo del navegador, que siempre debe ser definido como el 0% y el 100% del selector.
Nota: Utilice lapropiedaddeanimación para controlar la apariencia de la animación también se utiliza para seleccionar la animación se unen. .
gramática
| valor | explicación |
|---|---|
| animationname | Requerido. Definir el nombre de la animación. |
| fotogramas clave selector | Requerido. La duración porcentaje de la animación. Valor jurídico: 0-100% Nota: Puede utilizar una animación de fotogramas clave-selectores. |
| CSS-estilos | Requerido. Uno o más atributos legítimos de estilo CSS |
ejemplos en línea
Ejemplos
Muchos de los selector de llave marco para añadir una película:
{
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;}
}
Trate »
Ejemplos
Cambiar muchos estilos CSS en una animación:
{
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;}
}
Trate »
Ejemplos
Muchos selectores de fotogramas clave con gran variedad de 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;}
}
Trate »
Artículos relacionados
CSS3 Tutorial: Animación CSS3