Animación con css3 y html5
0 recomendaciones1,815 vistas
El documento presenta una conferencia virtual sobre animaciones con CSS3 y HTML5. Explica la sintaxis básica de las animaciones CSS, incluyendo valores como animation-name, animation-duration, y @keyframes. También cubre compatibilidad de navegadores y los prefijos requeridos.
Animación con css3 y html5
- 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