Animaciones y transiciones en CSS: Que empiece el baile
-
Upload
luis-calvo-diaz -
Category
Technology
-
view
398 -
download
0
Transcript of Animaciones y transiciones en CSS: Que empiece el baile
Transiciones y animaciones CSS - ¡Que empiece el baile!
Transiciones y animaciones CSS
¡Que empiece el baile!
Madrid – 27 de Noviembre de 2015
Transiciones y animaciones CSS - ¡Que empiece el baile!
1. Introducción2. Transiciones CSS3. Animaciones CSS
Índice
Luis Calvo DíazSenior Front Developer en Paradigma Tecnológico@LuisCalvoDiaz
Autor
Transiciones y animaciones CSS - ¡Que empiece el baile!
1 Introducción
Objetos embebidos
Programación
Transiciones y animaciones CSS - ¡Que empiece el baile!
1 Introducción
TransicionesProporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que éstos se produzcan de manera instantánea
AnimacionesPermiten crear secuencias de acciones sobre un elemento HTML
Transiciones y animaciones CSS - ¡Que empiece el baile!
2 Transiciones CSS
Para crear un efecto de Transición basta con especificar la propiedad (o propiedades) que van a cambiar y la duración de la transición, por ejemplo: transition: width 2s
Además contamos con las siguientes propiedades:• transition-delay• transition-timing-function
Linear Ease Ease-in Ease-out Ease-in-out
transition: width 2s linear 1s
Podemos usar también:
Transiciones y animaciones CSS - ¡Que empiece el baile!
2 Transiciones CSS
Transiciones y animaciones CSS - ¡Que empiece el baile!
2 Animaciones CSS
Para crear una animación sobre un elemento HTML necesitamos especificar, al menos, el “animation-name”, “animation-duration” y los “keyframes” que conforma la secuencia de la animación a realizar. Por ejemplo:
@keyframes ejemplo { from {background-color: red;} to {background-color: yellow;}}
div { width: 100px; height: 100px; background-color: red; animation-name: ejemplo; animation-duration: 4s;}
Los @keyframes podemos especificarlos también en forma de porcentajes:@keyframes ejemplo { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;}}
Transiciones y animaciones CSS - ¡Que empiece el baile!
2 Animaciones CSS
Además contamos con las siguientes propiedades que nos ayudan a parametrizar y definir con más detalle nuestra secuencia de animación:
• animation-timing-function• animation-delay• animation-iteration-count : número de veces (por defecto 1), “infinite”, “initial” (1) o “inherit”• animation-direction: “normal” (por defecto) “reverse” (comienza desde el final), “alternate” y
“alternate-reverse”• animation-fill-mode: por defecto la animación no surtirá efecto antes de que comience ni después de
terminar, pero podemos modificar esto con “backwards” (antes de la animación se aplicarán los estilos del keyframe 0%), “forwards” (cuando finalice la animación, el elemento se quedará con los estilos del keyframe 100%), “both” (ambos) o “normal” (es el valor por defecto, ninguno de los anteriores)
Podemos usar el siguiente atajo:animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode];
Transiciones y animaciones CSS - ¡Que empiece el baile!
2 Animaciones CSS
Transiciones y animaciones CSS - ¡Que empiece el baile!
¡Muchas gracias!
Buscamos talento:[email protected]