Stop one animation but keep alternating the other animation in CSS-CodePudding

There are two animations, fade in from left, and alternating glow. How to keep the alternating glow running but stop the fade in after one run?

.module{-webkit-animation:  fadeinwhileglowing 2s ease-in-out infinite alternate;}

@keyframes fadeinwhileglowing {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-40px);
    transform: translateX(-40px);
  }

  25% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  from {
    box-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 25px #fff
  }
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff
  }
}

CodePudding user response：

You can separate the two animations and give animation multiple keyframes. I'm not sure what you're trying to do with the glow animation as it looks a bit funky in Firefox but I hope this example illustrates the solution.

(I removed some of the vendor prefixes to make it easier to read. Add them back in your production code)

.module {
  animation: fadein 2s ease-in-out infinite,
             glow 2s ease-in-out infinite alternate;
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  25% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes glow {
  from {
    box-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 25px #fff
  }
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff
  }
}

/* To make the glow visible */
body { background: #000 }

<div >Fade me and glow me!</div>