为一个元素使用多个动画

Question

我有一个元素希望使用两个关键帧动画，但是它仅应用其中一个动画。

我的CSS关键帧动画

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

将它们应用于元素

所以我希望先应用“ fadeInEffect”，然后再应用第二个动画“ loopAnimation”。

.arrowLogo {
   animation-name: fadeInEffect;
   animation-duration: 2s;

   animation-name: loopAnimation ease 4s infinite 1s;
   animation-direction: alternate;
}

我希望两个动画可以同时应用，但是它只应用在另一个动画之上编写的动画。

Answer 1

像这样简单：

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