Using CSS animations as state machines to remember focus and hover states with CSS only

Recently, I was searching for a way to style an element depending on whether it was ever focused. I wanted to do this without JavaScript, just with CSS, because I was going to use it in a demo about the new focusgroup web platform feature . Focusgroup handles a lot of keyboard navigation logic for you, for free, with only an HTML attribute. So adding a bunch of JavaScript code to track past focus…