- Why animate? Guidance and clarification, style and branding.
- Duration: how long an iteration of an animation takes to complete.
- Delay: how long it takes before an animation starts
- Timing function: the easing of an animation
- CSS Variables: custom properties that can be inherited by elements and set by JavaScript:
:root {
--duration: 2s;
}
.thing {
animation-duration: calc(var(--duration, 1s));
}const thingEl = document.querySelector('.thing');
thingEl.style.setProperty('--color', 'green');