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


1. Introducción2. Transiciones CSS3. Animaciones CSS

Índice

Luis Calvo DíazSenior Front Developer en Paradigma Tecnológico@LuisCalvoDiaz

Autor


1 Introducción

Objetos embebidos

Programación


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


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:


2 Transiciones CSS


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


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


2 Animaciones CSS


¡Muchas gracias!

Buscamos talento:[email protected]

Animaciones y transiciones en CSS: Que empiece el baile

Technology

Transcript of Animaciones y transiciones en CSS: Que empiece el baile