Slides del taller sobre "Animaciones y Transiciones en CSS"

1. Transiciones y animaciones CSS - ¡Que empiece el baile!
Transiciones y animaciones CSS
¡Que empiece el baile!
Madrid – 27 de Noviembre de 2015

2. Transiciones y animaciones CSS - ¡Que empiece el baile!
1. Introducción
2. Transiciones CSS
3. Animaciones CSS
Índice
Luis Calvo Díaz
Senior Front Developer en Paradigma Tecnológico
@LuisCalvoDiaz
Autor

3. Transiciones y animaciones CSS - ¡Que empiece el baile!
1 Introducción
Objetos embebidos
Programación

4. Transiciones y animaciones CSS - ¡Que empiece el baile!
1 Introducción
Transiciones
Proporcionan una forma de animar los cambios de las propiedades CSS,
en lugar de que éstos se produzcan de manera instantánea
Animaciones
Permiten crear secuencias de acciones sobre un elemento HTML

5. 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:

6. Transiciones y animaciones CSS - ¡Que empiece el baile!
2 Transiciones CSS

7. 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;}
}

8. 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];

9. Transiciones y animaciones CSS - ¡Que empiece el baile!
2 Animaciones CSS

10. Transiciones y animaciones CSS - ¡Que empiece el baile!
¡Muchas gracias!
Buscamos talento:
rrhh@paradigmadigital.com