Carmen Ansio PRO
Design Engineer at LottieFiles
Animación Web
🍋 Workshop
Making things move
LottieFiles
¿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?
Animación web
Animando elementos con CSS
Principios de animación
Comencemos por
el principio
Las opciones de siempre
para animar en la web
transform
transition
animationTransformaciones CSS
modificar forma, tamaño o posición
Transiciones CSS
cambios de un estado a otro
Animaciones CSS
secuencias de cambios de estilos con @keyframes
Scrollytelling
para animar en la web
Un gran poder conlleva gran responsabilidad
@media (prefers-reduced-motion: no-preference) {
/* your fancy motion */
}La interpolación
¿Qué ocurre con el navegador?
Pero... ¿que sucede en medio?
Veamos las opciones
con más detalle
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);
}
}
Todas las propiedades
de CSS... ¿se pueden animar?
No podemos hacer
transiciones directas en fondos degradados
Pero sí podemos
desplazar y escalar los fondos
"Actualmente, no es posible animar directamente display: none; en CSS".item {
animation: fade-out 0.5s forwards;
}
@keyframes fade-out {
100% {
opacity: 0;
display: none;
}
}Pero...por donde
¿Podemos comenzar?
¿Demasiado básico?
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;
}
}Demo Animación CSS
Cubo 3D
<div class="scene">
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>.scene {
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 20s infinite linear;
}.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
}.face {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0.8;
border: 2px solid rgba(255, 255, 255, 0.5);
}.front {
transform: rotateY(0deg) translateZ(100px);
background-image: url("https://picsum.photos/200/200?random=1");
}@keyframes rotate {
0% {
transform: rotateX(0) rotateY(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}Microinteracciones
Animando elementos de la UI
Efectos animados
para animar tus diseños
Animaciones con
librerías JavaScript
.fill {
animation: progress linear forwards;
animation-timeline: scroll();
}
@keyframes progress {
from {
stroke-dasharray: 0px 1px;
}
to {
stroke-dasharray: 1px 1px;
}
}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();
}Las nuevas opciones
para animar en la web
CSS Scroll Snap Module
Intersection Observer
La scroll-driven animations spec
Web Animations API - CSS Animation API
Scroll-driven animations
Animaciones basadas en el scroll del usuario
API ScrollTimeline
Conjunto de reglas/protocolos que permiten que las aplicaciones de software se comuniquen entre sí para intercambiar datos
animation-timeline: view();
animation-timeline: scroll();Cuando una animación utiliza una de estas dos nuevas líneas de tiempo, se basa en el scroll y no la habitual basada en la duración.
ScrollTimeline Scroll
animation-timeline: scroll();
:root {
animation: scroll 1s linear;
animation-timeline: scroll();
}
body {
min-height: 300vh;
}Modern CSS
Spoiler alert
@property --s {
syntax: "<integer>";
inherits: true;
initial-value: 0;
}
@keyframes scroll {
to {
--s: 100;
}
}body::before {
content: "Scroll Progress\A "counter(s) "%";
counter-reset: s var(--s);
font-size: 50px;
font-family: system-ui, sans-serif;
font-weight: 900;
white-space: pre;
text-align: center;
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
margin: auto;
}Recordáis el cubo 3D
¿Podemos linkar la animación al scroll?
<div class="scroll-container">
<div class="section">Sección 1</div>
<div class="section">Sección 2</div>
<div class="section">Sección 3</div>
<div class="section">Sección 4</div>
</div>.scroll-container {
height: 400vh;
display: grid;
grid-template-rows: 100vh 100vh 100vh 100vh;
}.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotate linear;
animation-timeline: scroll();
animation-range: 0 400vh;
}animation-timeline: scroll();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();
}ScrollTimeline View
animation-timeline: view();
<section class="wrap">
<div class="move">
<figure><img src="https://picsum.photos/400/400?random=1" /></figure>
<figure><img src="https://picsum.photos/400/400?random=2" /></figure>
...
</div>
</section>img {
width: var(--d);
aspect-ratio: 1;
-webkit-box-reflect: below 0.5em linear-gradient(#0000, #0004);
animation: ry 1s cubic-bezier(0.32, 0, 0.68, 0) both, tz 1s ease-in both;
animation-timeline: view(inline);
}@keyframes ry {
0% {
rotate: y -90deg;
}
50% {
rotate: y 0deg;
animation-timing-function: cubic-bezier(0.32, 1, 0.68, 1);
}
100% {
rotate: y 90deg;
}
}@keyframes tz {
0% {
translate: -50% 0;
}
50% {
translate: 0 0 calc(1.5 * var(--d));
animation-timing-function: ease-out;
}
100% {
translate: 50% 0;
}
}.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;
}Hablemos
del soporte
@supports (animation-timeline: view()) {
/* your fancy scroll motion */
}
Mezclando técnicas
ScrollTimeline View + Scroll Snap
LottieFiles
el formato para animar en la web
Demos
Vanilla or not
Recursos
esenciales
Gracias
slides.com/carmenansio
Animación Web con CSS - Lemoncode
By Carmen Ansio
