Conceptos básicos de animación en CSS3

1. @marco_jaw
Facilitador: MARCO ANTONIO ANDRADE
BIENVENIDOS A NUESTRA PRIMERA
CONFERENCIA VIRTUAL.

2. Facilitador: MARCO ANTONIO ANDRADE
ANIMACIÓN CON CSS3 Y HTML5

3. Sintaxis de las animaciones CSS
Valor Descripción
animation-name Especifica el nombre de la animación
animation-duration Especifica la duración de la animación en
segundos
animation-timing-function Especifica la curva de la velocidad del progreso
entre los distintos keyframes de la animación
animation-delay Especifica el retardo en segundos antes de
iniciar la animación
animation-iteration-count Especifica cuantas veces se reproduce la
animación. También puede ser el valor infinite.

4. Sintaxis de las animaciones CSS
Valor Descripción
animation-direction Especifica la dirección de la animación. Se puede
reproducir de forma normal, o marcha atrás o
alternado.
animation-play-state Especifica si la animación se esta ejecutando o esta
en pausa.
animation-fill-mode Especifica si el elemento afectado, mantiene o no el
estilo cuando termina la animación.

5. Sintaxis de las animaciones CSS
 Fotogramas Claves (@Keyframes)
Ejemplo:
@keyframes animationName
{
from{
opacity:0.5;
background:red;
}
to{
opacity:1;
background:blue;
}
}

6. Sintaxis de las animaciones CSS
 Fotogramas Claves (@Keyframes)
Ejemplo:
@keyframes animationName
{
0%{…}
20%{…}
40%{…}
100%{
…
}
}

7. ¿Qué navegadores lo soportan?
 Sintaxis Estándar.
No soporte.
 Prefijos de los navegadores.
Firefox 5+, Chrome 4+, Safari 4+, Opera 12+, IE 10+
Prefijo Navegador
-moz-animation Firefox
-webkit-animation Chrome / Safari
-o-animation Opera
-ms-animation Internet Explorer