Using multiple animations for one element [duplicate]

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.

Sher E Yr · Accepted Answer · 2019-08-30 11:13:21Z

0

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);
   }
}

answered Aug 30, 2019 at 11:13

Sher E Yr

1066 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using multiple animations for one element [duplicate]

My CSS keyframe animations

Applying them to the element

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My CSS keyframe animations

Applying them to the element

1 Answer 1

Comments

Linked

Related