Skip to content

[css-animations-2] frames() as a more intuitive steps() #136

Closed
@tabatkins

Description

@tabatkins

As was discussed in the past, and most recently championed by Rachel Nabors, steps() is defined in a nonintuitive way. Depending on whether you use "start" or "end", you never actually see the starting/ending value. If you do want to see both the starting and ending values, and have a stepped transition between them, you need to do some math and overshoot the desired end-point instead. This is extremely common; for example, the default "discrete" method that we use for things without a better interpolation method is exactly this! This also shows the weakness of the hack - for non-interpolable values, you can't "overshoot" either.

It was suggested that we add a new function that handles things more intuitively, so that saying you want "2 steps" creates a timing function that spends half the time on the starting value and half on the ending value, "3 steps" spend a third of time at the start, a third in the middle, and a third at the end, etc.

The name frames() was suggested for this and proved popular in Rachel's group of authors, by analogy with animation frames. It takes a single <integer> which must be >= 2.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions