Let’s animate some CSS custom properties! This is a powerful way to approach CSS animations that would otherwise be tedious or impractical to implement. Animate the What Now? I’ll explain. Take this simple CSS animation, for example. @keyframes slide-top{from{translate: -100px;}to{translate: 100px;}}.top-potato{animation: slide-top 3s infinite alternate;} It moves something from left to right, then back, over and over. It works just fine, but we can rewrite it to use a CSS custom property...
