How to modify a CSS text animation-CodePudding

I found an excellent CSS animation that would look great on a menu I am working on. The animation is first revealing the text in one div, and a few seconds later the text in the other div. After another few seconds, the text in the two divs disappears. Then the animation is repeating itself.

I am trying to create two divs with classes (to make it possible to call them with javascript functions). The first div should run the part of the animation in which the two texts are revealed. The other div the animation in which the two texts disappears. The two animations should only run once. How can this be done?

Codepen: https://codepen.io/Atise/pen/YzQorxw

<div class="PrSidenav">
  <div class="animation_container">
    <div class="first_animation">First part of the menu</div>
    <div class="second_animation">
      <span>Second part of the menu</span>
    </div>
  </div>

  <div class="animation_container">
    <div class="first_animation">First part of the menu</div>
    <div class="second_animation">
      <span>Second part of the menu</span>
    </div>
  </div>

  <div class="animation_container">
    <div class="first_animation">First part of the menu</div>
    <div class="second_animation">
      <span>Second part of the menu</span>
    </div>
  </div>

  <div class="animation_container">
    <div class="first_animation">First part of the menu</div>
    <div class="second_animation">
      <span>Second part of the menu</span>
    </div>
  </div>

  <div class="animation_container">
    <div class="first_animation">First part of the menu</div>
    <div class="second_animation">
      <span>Second part of the menu</span>
    </div>
  </div>

  <div class="animation_container">
    <div class="first_animation">First part of the menu</div>
    <div class="second_animation">
      <span>Second part of the menu</span>
    </div>
  </div>
</div>

<style>

body {
  background: white;
  color: #555;
  font-family: "Roboto";
  font-weight: 300;
  font-size: 32px;
  padding-top: 40vh;
  height: 100vh;
  overflow: hidden;
}

.theSidenav {
  width: 20vw !important;
}

.animation_container {
  width: 14vw;
  display: grid;
  grid-template-columns: 16vw 10vw;
  grid-gap: 10px;
}

.first_animation {
  padding-right: 0;
  margin-right: 0;
}

.first_animation,
.second_animation {
  overflow: hidden;

  /* white-space:nowrap; */
}

.first_animation {
  animation: showup 7s forwards;
}

.second_animation {
  width: 0px;
  animation: reveal 7s forwards;
}

.second_animation span {
  margin-left: -355px;
  animation: slidein 7s forwards;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }
  20% {
    margin-left: -800px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 1;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 355px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: 355px;
  }
}

p {
  font-size: 12px;
  color: #999;
  margin-top: 200px;
}
</style>

CodePudding user response：

Change infinite for 1 and the animation will run just one time

CodePudding user response：

I solved myself, with a bit of trial and error!

https://codepen.io/Atise/pen/YzQorxw

HTML

<div class="first_animation">First part of the menu</div> 
<div class="second_animation"> 
  <span>Second part of the menu</span>
</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto:300");

body {
  background: white;
  color: #555;
  font-family: "Roboto";
  font-weight: 300;
  font-size: 32px;
  padding-top: 40vh;
  height: 100vh;
  overflow: hidden;
}

.thePrSidenav {
  width: 20vw !important;
}

.animation_container {
  width: 14vw;
  display: grid;
  grid-template-columns: 16vw 10vw;
  grid-gap: 10px;
}

.first_animation {
  padding-right: 0;
  margin-right: 0;
}

.first_animation,
.second_animation {
  overflow: hidden;

  /* white-space:nowrap; */
}

.first_animation {
  animation: showup 7s forwards;
}

.second_animation {
  width: 0px;
  animation: reveal 7s forwards;
}

.second_animation span {
  margin-left: -355px;
  animation: slidein 7s forwards;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }
  20% {
    margin-left: -800px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 1;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 355px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: 355px;
  }
}

p {
  font-size: 12px;
  color: #999;
  margin-top: 200px;
}