Improve accessibility by reducing motion of all kinds: View Transitions, CSS Transitions, CSS Animations, and Picture elements β€” all without rewriting styles or content.

Examples use an existing client website, showing that you can do the same in ongoing work. Don't wait for your next project to get a fresh start.. do it today!

πŸ”— https://chrisruppel.com/blog/modernizing-with-web-platform-reduced-motion/

#accessibility #a11y #WebDev #CSS #CssTransitions #CssAnimations #ViewTransitions #JS #JavaScript #WebPlatform

Modernizing with the Web Platform: Reduced Motion

Demonstrating how the modern Web Platform can simplify motion reduction on an old codebase.

Chris Ruppel

#Development #Techniques
A friendly introduction to spring physics Β· β€œSprings can have a surprisingly profound impact on animation quality.” https://ilo.im/13xtfx

_____
#Motion #Animation #Interaction #Physics #WebDesign #WebDevelopment #WebDev #Frontend #JavaScript #CSS #CssTransitions

A Friendly Introduction to Spring Physics

Of all the little tips and techniques I've picked up over the years about animation, spring physics remains one of the most powerful and flexible. In this tutorial, we'll learn how to harness their power to build fluid, organic transitions.

Hmm, can anyone else verify that #CSS transitions based on font-size aren't working on #FirefoxFocus?
https://code.fixato.org/transitions.html

It should increase/decrease the font size and line-height and invert the colours of the checkbox label as well as change the height and padding after checking/unchecking it, with a delay and duration of 2 seconds.
However, on Firefox Focus (the automatic cookies deleting version of #Firefox for #Android) the font-size and line-height is changed immediately; only the background/foreground colors, padding and element height are transitioned with delay/gradually.

#development #coding #webDev #CSSTransitions

CSS font-size transition test