TLDR Web Dev · ARTICLES & TUTORIALS

TIME-BASED CSS ANIMATIONS

yuanchuan.dev5 min read

Summary from the TLDR Web Dev newsletter

Time-based CSS animations offer a new approach to creating animations without using traditional keyframes. The technique uses a custom CSS variable that tracks time in milliseconds, providing a way to manipulate CSS properties in real time. This article goes over various examples of such animations with code examples, showing off how to control animation duration, frame rate, easing, and more with precision.