animaciones CSS3

CSS3, podemos crear animaciones que pueden sustituir a muchas páginas de imágenes animadas, animaciones Flash y archivos JavaScript.

CSS3
animación

CSS3 @keyframes reglas

Para crear animaciones CSS3, que tendrá que aprender las reglas @keyframes.

@keyframes regla es para crear la animación. Especificar un estilo CSS y animación cambiará gradualmente al nuevo estilo del estilo actual dentro de las reglas @keyframes.

Soporte para el navegador

Las cifras de la tabla representan el primer navegador compatible con el número de versión de la propiedad.

Inmediatamente después de la -webkit- digital, -MS- o hace -moz- en apoyo del prefijo atribuyen primer número de la versión del 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-
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-

Ejemplos

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

animaciones CSS3

Al crear @keyframes animación, enlazarlo a un selector, de lo contrario la animación no tendrá ningún efecto.

Especificar al menos dos propiedad de animación CSS3 está ligado a un selector:

En él se especifica el nombre de la animación
Cuando una animación de longitud predeterminada

Ejemplos

El "MyFirst" atado a la animación div elemento Duración: 5 segundos:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Trate »

Nota: Debe definir la duración del nombre de la animación y la animación.Si se omite la duración de la animación no funcionará porque el valor predeterminado es 0.

Lo animaciones CSS3 son?

elemento de animación es hacer un cambio gradual de un estilo a otro efecto estilo.

Se puede cambiar a medida que muchos estilos tantas veces.

Utilice el porcentaje de cambio en el tiempo prescrito, o palabra clave "de" y "a", lo que equivale a un 0% y 100%.

0% es el comienzo de la animación, la animación es 100% completo.

Para un mejor soporte de los navegadores, debe definir siempre el 0% y el 100% del selector.

Ejemplos

Cambiar el color de fondo cuando la animación es de 25% y 50%, y 100% completo cuando la animación cambió de nuevo:

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

Trate »

Ejemplos

Cambiar el color de fondo y la ubicación:

@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Trate »

las propiedades de animación CSS3

En la siguiente tabla se enumeran las reglas @keyframes y todas las propiedades de la animación:

propiedad	descripción	CSS
@keyframes	animación disposiciones.	3
animación	Abreviación de las propiedades de todas las propiedades de animación, además de la propiedad-play de estado de animación.	3
animación-nombre	Especifica el nombre de la animación @keyframes.	3
animación duración	animación disposiciones tarda en completar un ciclo de segundos o milisegundos. El valor predeterminado es 0.	3
animación-tiempo-función	Una velocidad predeterminada de la curva de la animación. El valor por defecto es "aliviar".	3
animación de retardo	Cuando una animación predeterminada comienza. El valor predeterminado es 0.	3
animación-iteración de recuento	número predeterminado de veces que se jugó la animación. El valor predeterminado es 1.	3
animación dirección	Si las disposiciones de la animación para jugar a la inversa para el siguiente ciclo. El valor por defecto es "normal".	3
animación-play-Estado	Si las disposiciones de la animación se está ejecutando o está en pausa. El valor por defecto es "en ejecución".	3

Los dos ejemplos siguientes establecen todas las propiedades de la animación:

Ejemplos

Ejecutar la animación MyFirst, fijados todos los atributos:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Trate »