Making Orbit Animations with CSS Custom Properties

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…