Andreas ReinholdandClaude Opus 5
597656c88a
Four components animated background-color and color on ease-spatial-fast, whose fast variant peaks at 1.094 — the one thing tokens/motion.css says a colour must never do. Tailwind cannot emit two springs on one element, so a small unlayered file gives shape and size the spatial spring and colour and elevation the effects one in a single property list. Plan step 18, actions.md ACT-19. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
41 lines
2.6 KiB
CSS
41 lines
2.6 KiB
CSS
/*
|
|
* The transitions an action runs between its states — buttons, connected segments, menu items,
|
|
* the FAB menu's trigger.
|
|
*
|
|
* M3 has two spring styles and they are not interchangeable: spatial moves things (position,
|
|
* size, rotation, rounded corners) and overshoots by 9% on the way, effects changes how things
|
|
* look (colour, opacity, elevation) and is critically damped, because a colour must never
|
|
* overshoot — tokens/motion.css says so in the library's own words. An element whose corners and
|
|
* colours both change on a press therefore needs two springs at once, which Tailwind cannot write
|
|
* (`duration-*` and `ease-*` each emit one value); CSS can, by giving `transition-property` a
|
|
* list and matching it position for position.
|
|
*
|
|
* `state-transition-fast` is the press/hover/select transition of a control the finger lands on:
|
|
* shape and size on the fast spatial spring, colour and elevation on the fast effects spring.
|
|
* `state-transition-default` is the same pair one step slower, for the bigger morph of a FAB
|
|
* turning into a close button.
|
|
*
|
|
* Unlayered, as the rest of the package's component CSS, so a `transition-*` utility on the call
|
|
* site cannot half-undo one.
|
|
*/
|
|
|
|
@utility state-transition-fast {
|
|
transition-property: border-radius, padding, margin, background-color, color, box-shadow;
|
|
transition-duration:
|
|
var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration),
|
|
var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function:
|
|
var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast),
|
|
var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@utility state-transition-default {
|
|
transition-property: border-radius, padding, margin, background-color, color, box-shadow;
|
|
transition-duration:
|
|
var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration),
|
|
var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function:
|
|
var(--md-sys-motion-spatial-default), var(--md-sys-motion-spatial-default), var(--md-sys-motion-spatial-default),
|
|
var(--md-sys-motion-effects-default), var(--md-sys-motion-effects-default), var(--md-sys-motion-effects-default);
|
|
}
|