Multiple css3 animation on single element is one of the most important technique to break down complex animation. Its increase the reusability & maintainability of complex animation.

How to use?

Multiple css3 animation can be achieve by putting them one after another separated by a coma. It can be used in individual animation properties or in animation shorthand syntax.

Multiple css3 animation syntax using individual properties-

 

.text-1 {  
  animation-name: fadeInRight, glow;
  animation-duration: 0.5s, 0.3s;
  animation-fill-mode: forwards;
  animation-delay: 0s, 0.2s 
}

 

Multiple css3 animation shortand syntax-

 

.text-1 {
  animation: fadeInRight 0.5s forwards, glow 0.3s forwards 0.2s;
}

 

In above example we have not used animation-delay for fist animation in shorthand syntax but in individual syntax we defined animation-delay for both animation. The point is if we use only one value in individual animation properties same value will apply on both animation that's why we defined only one value in animation-fill-mode property in individual syntax.

 

Benefits of using multiple animation on same element

First of all it’s simplify the complex animation remarkably. We can break down complex animation into simple individual part.

Let’s closely look at the @keyframes rules used in above example and in animation used in top of the page.

 

@keyframes fadeInRight {
  0% { transform: translateX(200px); opacity: 0;}
  100% { transform: translateX(0px); opacity: 1;}
}

@keyframes glow {
  100% { text-shadow: rgb(255, 255, 255) 0px 0px 0px}
}

 

In fadeInRight @keyframes rule we moving text from right to let 200px and changing opacity 0 to 1. And in glow @keyframes rule just removing text-shadow that was initially defined in css. Our first animation-duration is 0.5s & second is 0.3s with 0.2s delay. If we try to marge these two @keyframes rules into one then the rule will be more complex than before & it will be more difficult if we try to increase or decrease duration of specific one effect.

Browser Support

In safari there is some compatability issue using multiple animation. You cannot animate same attribute more than once, on a same element, the last one will overwrite other.