Using multiple animations for one element

Question

I have a element i wish to use two keyframe animations upon, but it only applies one of the animations.

My CSS keyframe animations

@keyframes loopAnimation {
    0% {
       transform: translateX(0);
    }
    100% {
       transform: translateX(300px);
    }
 }

 @keyframes fadeInEffect {
   0% {
      opacity: 0;
      transform: translateX(0);
   }
   50% {
      opacity: 0;
      transform: translateX(0);
   }
   80% {
      opacity: 0;
      transform: translateX(0);
   }
   90% {
      opacity: 0.5;
      transform: translateX(0);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

Applying them to the element

So i wish the 'fadeInEffect' to apply first and then get followed by the second animation, 'loopAnimation'.

.arrowLogo {
   animation-name: fadeInEffect;
   animation-duration: 2s;
 
   animation-name: loopAnimation ease 4s infinite 1s;
   animation-direction: alternate;
}

I expected the both animations to get applied at the same time, but it only applies the animation written above the other one.

score 0 · Answer 1 · answered Aug 30 '19 at 11:13

make it simple like this:

.arrowLogo {
   animation-name: fadenloopAnimation ease 4s infinite 1s;
   animation-direction: alternate;
}


@keyframes fadenloopAnimation {

   0% {
       opacity: 0;
       transform: translateX(0);
   }
   50% {
      opacity: 0;
      transform: translateX(150px);
   }
   80% {
      opacity: 0;
      transform: translateX(0);
   }
   90% {
      opacity: 0.5;
      transform: translateX(0);
   }
   100% {
      opacity: 1;
      transform: translateX(300px);
   }
}

Using multiple animations for one element

My CSS keyframe animations

Applying them to the element

1 Answers1