Today’s video prompt introduced two new CSS properties for me: transform and transition. I believe I have used transform before, but never with this complexity.
transformCSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.-MDN Web Docs
transition-propertyCSS property sets the CSS properties to which a transition effect should be applied. -MDN Web Docs
For the clock, we used transform to align the hand divs vertically to start at zero. We also used it to move the rotation axis from the center of the divs, so that it would rotate around the clock and not spin in place.
The transition property was mind blowing! Transition-duration I was familiar with, but the transition-timing-function was completely new and fascinating. If not for this challenge, I have no idea when I would have stumbled on using the cubic-bezier curve in CSS! I don’t think I’ve thought about curve types since high school. But it was that function that created the tick-tock animation of the hands (most noticeable on the second hand), where the hand goes just a bit past the next second and bounces back in place for a mechanical clock like-feel. I certainly want to play around with CSS more and just see what it can really do, because I think it is a lot.
And below is the result!