View profile

CSS Animation Weekly #161

This week we explore ways to bounce an element around, pong-style, using CSS, create some staggering
CSS Animation Weekly #161
By CSS Animation Weekly • Issue #161 • View online
This week we explore ways to bounce an element around, pong-style, using CSS, create some staggering animations in a real-world example tutorial, and delve into the “prefers-reduced-motion” property.
♥️ Donovan at CSSAnimation.rocks

Articles
Bounce Element Around Viewport in CSS
Bounce Element Around Viewport in CSS
See how you can create that Pong-like effect using CSS!
css-tricks.com  •  Share
Animating text like Sketch does using only CSS
Animating text like Sketch does using only CSS
Applying delays to animations can produce staggering results! Here’s a recreation of the Sketch homepage
medium.com  •  Share
Exploring prefers-reduced-motion
Exploring prefers-reduced-motion
While we love using animation we need to be aware that not everyone enjoys them the same way. Introducing “prefers-reduced-motion” - a way for users to signal that they prefer less animation by way of CSS media query. Learn how to best use it.
www.phpied.com  •  Share
Inspiration
A lovely implementation of the old 3-choices when it comes to building anything 
codepen.io  •  Share
A (basic but still awesome) re-creation of the original minecraft building-block interaction, in JavaScript!
codepen.io  •  Share
Unique way to set volume! Press and hold the icon to adjust the launch angle
codepen.io  •  Share
Nice use of the Splitting JS package to animate the letters in this animated verb
codepen.io  •  Share
This animated line bars interaction from the @keyframers is a great example of how CSS can handle hover and click effects in quite a tricky layout
codepen.io  •  Share
Always amazes me how CSS can be so interactive. This demo makes use of Pug to generate the HTML, and CSS animates the on / off state of a load of dots in this light-it-up game
codepen.io  •  Share
That’s all for this week! Please remember to help support this newsletter by either passing it along to friends, or if you like you can even become a patron here and help me pay the newsletter hosting bills! Many thanks, Donovan
Did you enjoy this issue?
CSS Animation Weekly

CSS Animation Weekly is a roundup of all the latest CSS animation articles and inspiration. Subscribe now and never miss an issue.

If you don't want these updates anymore, please unsubscribe here
If you were forwarded this newsletter and you like it, you can subscribe here
Powered by Revue