Follow

I have successfully added to Firefox (a local development copy on my machine only) a new CSS property, “transition-interrupt:special”, and a new Web-Animations property, “KeyframeEffect.composite:relative”. It is still proof of concept and unfinished, but worth celebrating.

This won’t work in any browser except the build on my machine, and I have not yet uploaded a patch:
codepen.io/kvndy/pen/RdGVvR
red: transition:transform 1.0s ease-in-out regular;
green: transition:transform 1.0s ease-in-out special;
purple: transition-interrupt: special;
blue: mixed

The longhand and mixed formats degrade nicely (purple and blue)

KeyframeEffect.composite mode “relative” also won’t work in any browser except mine. Using Web-Animations one can manually construct relative animations, but automatic conversion was needed to create transition-interrupt, as it was with OS X view animation
codepen.io/kvndy/pen/RdGgap

I’ll submit a patch to Mozilla soon, despite the likelihood of rejection. But my experiments have sent me down the rabbit hole of web standards. It may not be the most informed opinion, but I wish animation had less influence over layout.

Concepts I took for granted in Core Animation, like the separation of discrete and animated values, just aren’t present. For instance an “underlying value” can include animation, so I am struggling with issues like this: dbaron.org/css/test/2015/trans

@fool Relative animation, animated additively from the old value minus the new value, to zero.

Sign in to participate in the conversation
Mastodon for Tech Folks

This Mastodon instance is for people interested in technology. Discussions aren't limited to technology, because tech folks shouldn't be limited to technology either! We adhere to an adapted version of the TootCat Code of Conduct and have documented a list of blocked instances. Ash is the admin and is supported by Fuzzface, Brian!, and Daniel Glus as moderators. Hosting costs are largely covered by our generous supporters on Patreon – thanks for all the help!