Animación con css3 y html5

1,807 views

Published on

Conceptos básicos de animación en CSS3

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,807
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Animación con css3 y html5

  1. 1. @marco_jawFacilitador: MARCO ANTONIO ANDRADEBIENVENIDOS A NUESTRA PRIMERACONFERENCIA VIRTUAL.
  2. 2. Facilitador: MARCO ANTONIO ANDRADEANIMACIÓN CON CSS3 Y HTML5
  3. 3. Sintaxis de las animaciones CSSValor Descripciónanimation-name Especifica el nombre de la animaciónanimation-duration Especifica la duración de la animación en segundosanimation-timing-function Especifica la curva de la velocidad del progreso entre los distintos keyframes de la animaciónanimation-delay Especifica el retardo en segundos antes de iniciar la animaciónanimation-iteration-count Especifica cuantas veces se reproduce la animación. También puede ser el valor infinite.
  4. 4. Sintaxis de las animaciones CSSValor Descripciónanimation-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. 5. Sintaxis de las animaciones CSS Fotogramas Claves (@Keyframes) Ejemplo: @keyframes animationName { from{ opacity:0.5; background:red; } to{ opacity:1; background:blue; } }
  6. 6. Sintaxis de las animaciones CSS Fotogramas Claves (@Keyframes) Ejemplo: @keyframes animationName { 0%{…} 20%{…} 40%{…} 100%{ … } }
  7. 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

×