Agile Web Development with Rails 5.1

Iteration F3: Highlighting Changes

A common way to highlight changes made to a page via Ajax is the (now) infamous Yellow Fade Technique.^[60] 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.

You can implement this with CSS animations.^[61] In CSS animations, a class uses the animation attribute to reference a particular animation. The animation itself is defined as a series of keyframes that describe the style of an element at various points in the animation. The animation is executed by the browser ...