This was a fun weekly Codepen challenge. Animation is one area of CSS that I don't really get to use at work so this was my opportunity to work more with keyframes and transforms.
I immediately had flashbacks to Flash and tweening and wondered how it was possible to do this only using CSS. Then I found this Stack Overflow post which just uses CSS transform: rotate and puts the sun on a corner of the div. Simple and effective. (Don't look for astronomical accuracy with how the moon and sun orbit though!)
Spoiler alert: you can't. You can only use opacity, which is what I used in combination with keyframes. This was the most time-consuming part because I wanted the sky's colors to reflect the real day, which meant not making every single gradient each take up the same percentage, so this was a lot of trial and error with changing the opacity percentages.
Since the animation loops infinitely, I figured I'd add a pause/play button for people who want to check out the code without being distracted.