Agile Web Development with Rails 7

Iteration F3: Highlighting Changes

A common way to highlight changes made to a page is the (now) infamous Yellow Fade Technique.^[54] It highlights an element in a browser: by default it flashes the background yellow and then gradually fades it back to white. The user clicks the Add to Cart button, and the count updates to two as the line flares brighter. It then fades back to the background color over a short period of time.

While Tailwind provides an extensive set of utility CSS classes to cover most needs, there comes a time when you need something more. For us, now is that time.

You can implement this with CSS animations.^[55] In CSS animations, a class uses the animation attribute to reference a particular animation. The animation itself ...