A rather geeky/technical weblog, est. 2001, by Bramus
Back in June, Will Boyd wondered what things CSS can animate, which turns out to be quite a lot. This articles explores some of the unexpected things that CSS can animate and some nifty things you can do by animating them. I like this demo where you choose between two options (in which a z-index …
Continue reading “The Surprising Things That CSS Can Animate”
Ana Tudor recently shared a trick on how to make an image partially greyscale: #tinyCSStip Would you like to apply `filter: grayscale(1)`, but only partly, not everywhere? You can emulate that with blend modes. background: url(cat) 50%/ cover, linear-gradient(-45deg, transparent 50%, grey 0);background-blend-mode: luminosity Many variations possible. — Ana Tudor 🐯 (@anatudor) January 20, 2021 …
Continue reading “Animated Greyscale to Color Image Reveal Effect”
Nice demo by Jhey: See the Pen 3D CSS Birthday Card (Tap to open! 👇) by Jhey (@jh3y) on CodePen. Contains a little bit of JavaScript to make the card respond your mouse movement and to play the audio. The opening/closing of the card and the confetti are done using only CSS.
Mads Stoumann, writing for CSS-Tricks, starts off with a simple idea: set a Custom Property to either playing or paused to control animation-play-state. [data-animation] { /* … */ animation-play-state: var(–animps, running); } /* Use a checkbox to pause animations */ [data-animation-pause]:checked ~ [data-animation] { –animps: paused; } But one of the listed use cases is …
Continue reading “How to Play and Pause CSS Animations with CSS Custom Properties”
Great talk by Stéphanie Walter (starting at 39:00): With practical examples, I show why certain animations work better than others and how to find the best timing and duration to build UI animations that “feel right”. I explain how our brain works, why and how animations contribute to improving user experience. And what you need …
Continue reading “Enhancing User Experience With CSS Animations”
While working with CCTV cameras in a project, I was reminded of this short film from 2007:
This is crazy: Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters. Built on top of PoseNet to track the body’s pose, and the aforementioned …
Continue reading “Pose Animator – Animate SVG Illustrations using your Camera”
I like how this box animates on hover, thanks to the use of multiple box-shadow effects:
Paul Hebert on the Paul Hebert blog: Movement in nature doesn’t happen all at once. Imagine a flock of birds taking off, raindrops splashing on the ground, or trees bending in the wind. The magic of these moments comes from many small movements overlapping and converging. I wanted to bring this natural movement into my …
Continue reading “Staggered Animations with CSS Custom Properties”
Talk by Alex Holachek, as brought forward at React Conf 2019: As the technology to create Progressive Web Apps continues to mature, React developers have the opportunity to write web apps that in some cases can rival native ones in terms of speed and convenience. However, one barrier to feature parity is the difficulty of …
Continue reading “Building mobile-first web animations in React”