GIF

Now that we have the MishMash “bubble” illustration as an editable SVG image, it is time to start playing around with how it can be modified dynamically. The first experiment was to try to make it blink. Here, I describe two approaches, using CSS and a GIF. CSS Hover Blink The CSS version is based on this code: .blink-eye-thumb { display: block; transform-origin: center; will-change: transform; } a:hover .blink-eye-thumb, a:focus-visible .blink-eye-thumb, .blink-eye-thumb:hover, .mishmash-bubbles:hover .blink-eye-thumb { animation: bubble-eye-blink 850ms ease-in-out 2; } @keyframes bubble-eye-blink { 0%, 12%, 40%, 100% { transform: scaleY(1); } 20%, 26% { transform: scaleY(0.08); } 48%, 54% { transform: scaleY(0.14); } } The animation compresses the image vertically on hover/focus. To ensure it works everywhere, it targets: ...