CSS transitions allow you to make subtle changes to elements and animations allow you to gradually change the appearance of an element. This topic covers how to trigger transitions and animations. For a more in depth understanding of how to use CSS transitions, see Topic 11. For a more in depth understanding of how to use CSS animations, see Topic 13
With pure CSS and HTML, there are only a small number of methods that can be used to trigger transitions and animations. By using JavaScript, you are able to trigger transitions and animations in several ways by using JavaScript events. You can use events such as onclick to trigger whatever transition/animation you need. You also have the flexibility of altering the style of an element with JavaScript when an event takes place.
Here are a couple of examples of how to trigger CSS transitions and animations using JavaScript:
Examples
The first 3 examples show how you can trigger transitions with JavaScript using the events onmouseover, onmouseout, and onclick. The stars simply change color with a nice transition when these events take place.
This last example uses onclick to show and hide a dropdown menu. When the hamburger menu is clicked, the animation to fade in the menu is triggered. When the x is clicked to close the menu, the hamburger icon fades in.