#css-animations

[ follow ]
Web development
fromJoshwcomeau
10 hours ago

Color Shifting in CSS * Josh W. Comeau

Use HSL to randomize particle hues while fixing saturation and lightness for cohesive palettes; CSS hue-shifting during fade reveals limitations requiring workarounds.
fromFrontendmasters
1 week ago

The `-path` of Least Resistance (Part 2)

Now it's time to break free from containment entirely. In this second part, we're shifting from shapes that hold things in place to paths that guide movement. We're moving from clip-path to offset-path, where your elements don't get clipped into new shapes, they travel along custom routes. We talk about reduced motion for accessibility later in this post, but not all the demos in this post implement that media query
Web development
Web development
fromPiccalilli
2 weeks ago

The interpolate-size property is a great example of progressive enhancement

interpolate-size enables CSS transitions between intrinsic size keywords (auto, min-content, max-content, fit-content), allowing smooth animations to computed sizes like height:auto.
fromCSS-Tricks
3 weeks ago

3D Layered Text: Motion and Variations | CSS-Tricks

Let's start things off with a quick animation tip that pairs perfectly with layered 3D text. Sometimes, we want to rotate the element without actually changing the orientation of the text so it stays readable. The trick here is to combine multiple rotations across two axes. First, rotate the text on the z-axis. Then, add a tilt on the x-axis. Finally, rotate the text back on the z-axis.
Typography
fromCSS-Tricks
1 month ago

Bringing Back Parallax With Scroll-Driven CSS Animations | CSS-Tricks

Parallax is a design pattern where webpage elements move at different speeds during scrolling, creating a layered, three-dimensional effect. Initially reliant on JavaScript, a recent CSS-only method has emerged, allowing smoother, non-blocking animations.
Web development
#web-design
JavaScript
fromSmashing Magazine
3 months ago

Smashing Animations Part 3: SMIL's Not Dead Baby, SMIL's Not Dead - Smashing Magazine

SMIL animations in SVG enrich design capabilities beyond CSS animations.
SMIL is still viable for modern web design despite previous deprecation concerns.
[ Load more ]