Skip to content

Instantly share code, notes, and snippets.

View michaelwhyte's full-sized avatar

Michael Whyte michaelwhyte

View GitHub Profile
@robweychert
robweychert / frame-based-animation.md
Last active September 8, 2021 15:19
A simple Sass function for frame-based CSS animation

A simple Sass function for frame-based CSS animation

If you have experience with animation in other media, CSS animation’s percentage-based keyframe syntax can feel pretty alien, especially if you want to be very precise about timing. This Sass function lets you forget about percentages and express keyframes in terms of actual frames:

@function f($frame) {
  @return percentage( $frame / $totalframes )
}