CSS3 Transform and Transition: Creating a Running Wheel using CSS3 Transform and Transition
CSS3 Transform and Transition: Creating a Running Wheel using CSS3 Transform and Transition
In this video, we are creating a running wheel just using CSS3. By combining CSS3 transform and CSS3 transition, you can do magical animations.
What is the difference between CSS3 transform and CSS3 transition? Transform changes the look of the element by moving (translate), skewing (skew), rotating (rotate) or changing the size (scale) whereas transition is animation that happens between changes. To make it simpler, by just applying transform, the element will be moved to a new location, but with transition, you can see how the element is moving.
Here we are using both translate (to move the wheel) and rotate (to rotate the wheel) in transform. Then, we apply transition to this transform to make the wheel running during a specific period of time with some speed.
