How to Control Infinite CSS Animations (Part 2 of 2)
This time we get into very smooth starts and stops for infinite animations using CSS. One of the tricks is layering on a transition on top of an animation.
Temani Afif
How to Control Infinite CSS Animations (Part 1 of 2)
Something like manipulating the speed of an animation isn’t a big deal, but it’s harder when the animation is *already running*. We got tricks.
Two Circles, One Arrow, and Anchor Positioning
Drawing an line with arrows pointing to the center of two arbitrary elements measuring and displaying the distance between them doesn’t seem like it would be possible in CSS alone… but…
How to Create a CSS-only Elastic Text Effect
What can we say except BOINNNGGG BOINNGGGGGG.
Perfectly Pointed Tooltips: To The Corners
With our foundation in positioning and flipping tooltips with anchors, and making pointer tails, we’re going to get extra tricky and point them diagonally.
Perfectly Pointed Tooltips: All Four Sides
Tooltips are a natural fit for the abilities of Anchor Positioning, which can help place them on *any* side or corner. It does make dealing with the pointer extra tricky though.
Perfectly Pointed Tooltips: A Foundation
The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.
Infinite Marquee Animation using Modern CSS
A row of logos that animate forever perfectly and don’t have any duplicated HTML or JavaScript at all is quite a trick. Thanks modern CSS!
Drawing CSS Shapes using corner-shape
After you’ve got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes compared to `clip-path()`.
Creating Blob Shapes using clip-path: shape()
Blobs! Gooey weird shapes you can fill with any background and even animate.
