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 property like the border-color or to all the properties by specifying all.
element {
transition-property: border-color;
transition-property: all;
}The transition-duration specifies the time span of the transition. The duration can be declared as seconds (s) or milliseconds (ms).
element {
transition-duration: 0.5s;
}The transition-timing-function specifies the speed of the transition over the duration. By default the timing is set to ease. Other pre-defined timing-function values include linear, ease-in, ease-out, ease-in-out, step-start, and step-end. You can create a custom speed by inserting your own values into a cubic-bezier curve. Here is a cubic bezier playground that can help you visualize what the different speed of curves are like.
element {
transition-timing-function: ease-in;
}
