Multiple CSS Animations
Sometimes a single @keyframes rule isn't enough to get the effect you want.
One of the nice things about CSS animations is that you're not limited to just one animation per element. You can apply multiple animations to the same element by applying multiple @keyframes rules.
Syntax Breakdown
To use multiple animations with the animation shorthand, you just separate the values with a comma:
animation: zoom 2s infinite alternate, spin 5s linear infinite;This works the exact same way if you declare properties individually as well. The first value in the animation-name list corresponds to the first value in the animation-duration list, and so forth:
animation-name: zoom, spin;
animation-duration: 2s, 5s;
animation-iteration-count: infinite, infinite;
animation-direction: alternate, normal;Example of Applying Multiple Animations
In this example, we apply two separate animations to a single element. One animation controls a zooming effect (scaling), while the other controls a slow rotation.
This trick is extremely useful for combining simple, reusable animations into complex, unique sequences on individual elements.