When we open a door in the physical world, it does not instantly go from closed to open. There is a transition period between the two states when the door is in motion. We can now also give our users transitions between states in our UIs using CSS animations and transitions. Whether we are opening a menu, adding a hover effect, or creating a loader, animating the transition between states can help keep our users oriented and give our applications a much more natural feel.
In this talk we will look at:
- Examples of when animations would be helpful
- The difference between transitions and animations
- How to implement keyframes
- CSS limitations and JavaScript options to overcome them
- Accessibility concerns regarding animations