CSS-анимации как state-машины

В свежем выпуске «Веб-стандартов» обсуждали крайне интересную статью от Патрика Бросета про то, как использовать анимации для хранения истории работы со страницей.

Простая задача: если пользователь наводит мышку на элемент сейчас или наводил в прошлом, хранить это знание и использовать для каких-нибудь полезных визуализаций. На JavaScript такое делается просто. А вот если на чистом CSS?

Решение потрясающее:

.track-hover {
  --was-hovered: false;
  animation: track-hover .00001s linear forwards paused;
}
.track-hover:hover {
  animation-play-state: running;
}
@keyframes track-hover {
  to { --was-hovered: true; }
}

Если не до конца понятно, что здесь происходит, почитайте объяснение в статье. Или послушайте подкаст. Но само по себе такое решение рядом с container queries и нативными if в CSS позволяет добавить в вёрстку новый слой: не только текущее состояние страницы, но и прошлое, влияющее на настоящее.

https://patrickbrosset.com/articles/2026-03-09-using-css-animations-as-state-machines-to-remember-focus-and-hover-states-with-css-only/