Ese gato no se mueve... son imágenes individuales
Entiendo el movimiento
la rehostia!
.box {
animation: movebox 1s;
}
@keyframes movebox {
from { left: 0 }
to { left: 100px }
}
requestAnimationFrame(()=>{
// run in each frame
});
el.addEventListener('click', () => {
// la rehostia de cosas
});
el.addEventListener('click', () => {
// la rehostia de cosas
});
el.addEventListener('click', () => {
requestAnimationFrame(() => {
// la rehostia de cosas
});
});
el.addEventListener('click', () => {
requestAnimationFrame(() => {
// la rehostia de cosas
});
});
el.addEventListener('click', () => {
requestAnimationFrame(() => {
requestAnimationFrame(fnRipple);
requestAnimationFrame(fnExample);
requestAnimationFrame(fnAnalytics);
});
});
.show {
animation: fadeIn 1s;
}
@keyframes fadeIn {
from { opacity: 0 }
to { opacity: 1 }
}
element.classList.add('show');
// block the main thread for 3s just for fun
const t = performance.now();
while (performance.now() - t < 3000);
Es preciso, pero sólo puede hacer una cosa a la vez
element.top =
window.scrollY + node.height;
Especialista en pintar
transform:
translateY(calc(100vh - 100%));
100px
100px
3 colores + alpha
100 x 100 x 4 = 40000 bytes
40KB
40KB
4 bytes
.box {
width: 1px;
height: 1px;
transform: scale(100, 100);
will-change: transform;
}
.overlay {
background-color: rgba(0, 0, 0, 0.1);
will-change: transform;
width: 10vw;
height: 10vh;
transform: scale(10);
transform-origin: left top;
}
En una resolución 1433 x 738 nos ahorramos...
4MB de memoria
<body>
<p>
<a>
<h1>
<span>
.newclass
<a>
Por las dudas, calculo todo de nuevo
contain: layout;
left: 100px
transform: translateX(100px)
Use translateZ for everything!!!
Use translateZ for everything!!!
Use translateZ for everything!!!
will-change
CSS es declarativo: El navegador intentará optimizarlo antes de que se ejecute
JS es imperativo
Yo, justificando mi sueldo ante mi jefe
web components a tope!