Temani Afif

Temani mimics a View Transition by placing items using their index and translations. The placement calculation change when the index changes, which is an animation opportunity!

The `rule` (and friends) CSS property allows us to draw markers (like borders) in the gaps between columns and rows (and flex items!)

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.

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.

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…

What can we say except BOINNNGGG BOINNGGGGGG.

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.

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.

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.

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!