Carmen Ansio
Design Engineer at LottieFiles
Animación Web
Workshop
Making things move
LottieFiles
@media (prefers-reduced-motion: no-preference) {
/* your fancy motion */
}Por último, pero no menos importante
Un gran poder conlleva gran responsabilidad
¿Qué es animación?
Un proceso que crea imágenes en movimiento
¿Qué es animación?
Un proceso que crea imágenes en movimiento
Guía a usuarios, da feedback & mejora la UX
¿Qué es animación?
Principios de animación
Animación web
Animando elementos con CSS
Opciones que tenemos
para animar en la web
animation
transition
transformAnimaciones CSS
secuencias de cambios de estilos
Transiciones CSS
cambios de un estilo a otro
Transformaciones CSS
modificar forma, tamaño o posición
De nuevo...
Un gran poder conlleva gran responsabilidad
La interpolación
¿Qué ocurre con el navegador?
Pero... ¿que sucede en medio?
Transiciones
Animando elementos con CSS
button {
background: white;
transition: background 0.5s linear;
}
button:hover {
background: green;
}button {
transition: background 0.5s linear;
/*long-hand*/
transition-property: all;
transition-duration: 0.4s;
transition-timing-function: ease-out;
transition-delay: 0;
}
button {
transition: background 0.5s linear;
/*long-hand*/
transition-property: all;
transition-duration: 0.4s;
/*transition-timing-function: ease-out;*/
transition-timing-function: cubic-bezier(.59,-0.26,.33,1.42)
}
Animación web
Animando elementos con @keyframes
@keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(2);
}
}
@keyframes grow {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(2);
}
}
.class {
animation: grow 5s linear 1s;
}@keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(2);
}
}
Paso a paso para
crear una animación en CSS
Opciones que tenemos
para animar en la web
transition-duration: Establece la duracion de una transicion.
transition-delay: Establece el retraso antes de que se inicie una transicion.
animation-duration: Establece la duracion de una animacion.
animation-delay: Establece el retraso antes de que se inicie una animacion..mi-elemento {
/* Establecemos una transición de 1 segundo */
transition-duration: 1s;
/* Establecemos un retraso de 0,5 segundos antes de que se inicie la transición */
transition-delay: 0.5s;
/* Establecemos una animación de 2 segundos */
animation-duration: 2s;
/* Establecemos un retraso de 1 segundo antes de que se inicie la animación */
animation-delay: 1s;
}Animaciones
múltiples
.class {
animation:
move-left 2s linear,
change-color 4s linear;
}Encadenando
animaciones
.class {
animation:
move-left 5s linear 0s, /* Comienza a los 0s */
look-down 2.5s linear 5s, /* Comienza a los 5s (5 de la anterior) */
move-right 5s linear 7.5s, /* Comienza a los 7.5s (5 + 2.5 de la anterior) */
dissapear 2s linear 9.5s; /* Comienza a los 9.5s (5 + 2.5 + 2 de la anterior) */
}.item {
width: 100px;
height: 100px;
background: grey;
animation:
move 3s infinite 0s,
rotate 3s infinite 3s;
animation-composition: replace;
}
@keyframes move {
to {
transform: translateX(500px);
background: red;
}
}
@keyframes rotate {
to {
transform: rotate(360deg) scale(0.5);
background: indigo;
}
}Microinteracciones
Animando elementos de la UI
Efectos animados
para animar tus diseños
Animaciones con
librerías JavaScript
LottieFiles
el formato para animar en la web
Qué son las scroll-driven animations?
.fill {
animation: progress linear forwards;
animation-timeline: scroll();
}
@keyframes progress {
from {
stroke-dasharray: 0px 1px;
}
to {
stroke-dasharray: 1px 1px;
}
}Lenguaje universal
Old School Way
Con vanilla JavaScript
Porque no necesitas JS
el main thread visualmente
Linkando una animación CSS existente
a un scroller
img {
animation: 2s infinite alternate zoomin;
}@keyframes zoomin {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}.element {
animation-name: slidein;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
@keyframes slidein {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}@keyframes zoomin {
from {
margin-left: 100%;
width: 0%;
}
to {
margin-left: 0%;
width: 50%;
}
}img {
animation: zoomin 2s infinite alternate;
}img {
animation: zoomin linear both;
animation-timeline: scroll();
}La scroll-driven animations spec
Web Animations API - CSS Animation API
animation-timeline: scroll();
animation-timeline: view();Cuando una animación utiliza una de estas dos líneas de tiempo, sigue esa línea de tiempo y no la habitual basada en el tiempo.
Barra de progreso
animation-timeline: scroll(root);@supports (animation-timeline: scroll()) {
/* your cool scrolly motion */
}.content {
animation: appear linear;
animation-range: entry 0% entry 100%;
animation-timeline: view();
}Animando elementos
de la interfaz
.content {
animation: appear linear;
animation-range: entry 0% entry 100%;
animation-timeline: view();
}img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
/*timeline*/
view-timeline-name: --image;
view-timeline-axis: block;
/*animation*/
animation-timeline: --image;
animation-name: scroll;
/*range*/
animation-range: entry 25% cover 30%;
animation-fill-mode: both;
}DEMO Time
Animación Web con CSS
By Carmen Ansio
