CSS transitions and transforms are a powerful way to enhance and delight user experiences. No added library like GSAP or Velocity.js are necessary. Neither is JavaScript required. CSS3 animations include properties that are already built into CSS and are widely supported across all browsers. Animations are a great way to provide visual feedback, delightful moments and memorable interactions. Remember, animations should enhance the user experience and not be distracting. Animations should be consistent with subtle and simple movements.
Transitions
First, I will cover transitions since transitions act as the foundation of animations because they specify the duration of an element changing its state smoothly over time. Without a transition this state change would be abrupt and take effect immediately. You will want to use transitions when using transforms in order to produce a smooth and gradual animation.
There are four transition properties, but only two are required:
- transition-property (required)
- transition-duration (required)
- transition-timing-function
- transition-delay
The transition-property specifies the property to be transitioned. You can apply a transition to an individual…
