Delay Animation with CSS only-CodePudding

I've got the following code which rotates words with a CSS animation. I'm trying to figure out how to pause the animation on each word, before moving to the next word. I've tried using animation-delay, but that only applies to the start of the animation rather than each item.

How can I pause the animation FOR EACH WORD?

.im {
  float: left;
  margin-right: 0.3em;
}

.im-wrapper {
  display: flex;
  height: 1.1em;
}

.im-items {
  overflow: hidden;
}

.im-item {
  display: block;
  height: 100%;
  color: $primary;
  animation: move 10s infinite;
  animation-delay: 1s;
  white-space: nowrap;
}

@keyframes move {
  0% {
    transform: translateY(0%);
  }

  20% {
    transform: translateY(-100%);
  }

  40% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-300%);
  }

  80% {
    transform: translateY(-400%);
  }

  100% {
    transform: translateY(0%);
  }
}

<div class="hero-top-title">
    <div style="display: inline-block;">
        <div>Hi</div>
    </div>, I'm
    <div style="display: inline-block;">
        <div>A Person</div>
    </div>.
    <br>
    <div class="im">Am I a</div>
    <div class="im-wrapper">
        <div class="im-items">
            <div class="im-item im-item1">Father</div>
            <div class="im-item im-item2">Mother</div>
            <div class="im-item im-item3">Brother</div>
            <div class="im-item im-item4">Sister</div>
            <div class="im-item im-item5">Grandma</div>
        </div>
        <div>?</div>
    </div>
</div>

How can I pause the animation FOR EACH WORD?

CodePudding user response：

Need to keep the same transform of couple of moment then trigger next. Please follow the code below and you will understand what I mean.

.im {
  float: left;
  margin-right: 0.3em;
}

.im-wrapper {
  display: flex;
  height: 1.1em;
}

.im-items {
  overflow: hidden;
}

.im-item {
  display: block;
  height: 100%;
  color: $primary;
  animation: move 10s infinite;
  animation-delay: 1s;
  white-space: nowrap;
}

/* Here is the different */
@keyframes move {
  0% {
    transform: translateY(0%);
  }
  10% {
    transform: translateY(-100%);
  }
  20% {
    transform: translateY(-100%);
  }
  30% {
    transform: translateY(-200%);
  }
  40% {
    transform: translateY(-200%);
  }
  50% {
    transform: translateY(-300%);
  }
  60% {
    transform: translateY(-300%);
  }
  70% {
    transform: translateY(-400%);
  }
  80% {
    transform: translateY(-400%);
  }
  90% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(0%);
  }
}

<div class="hero-top-title">
    <div style="display: inline-block;">
        <div>Hi</div>
    </div>, I'm
    <div style="display: inline-block;">
        <div>A Person</div>
    </div>.
    <br>
    <div class="im">Am I a</div>
    <div class="im-wrapper">
        <div class="im-items">
            <div class="im-item im-item1">Father</div>
            <div class="im-item im-item2">Mother</div>
            <div class="im-item im-item3">Brother</div>
            <div class="im-item im-item4">Sister</div>
            <div class="im-item im-item5">Grandma</div>
        </div>
        <div>?</div>
    </div>
</div>

CodePudding user response：

Delay works only once at the start. So doesn't work with multiple iterations. You need to add blank frames like Feroz suggestd.
Here is a thread about the same topic: CSS animation delay in repeating

What you are trying is some sort of vertical carousel. Look for CSS only carousels. Following is an example, you can repurpose it to slide your text. You need to adjust animation slideMe to change pause time. Click on 'Full page' to see it better.

A codepen demo:

<iframe height="400px" style="width: 100%;" scrolling="no" title="CSS only - A scalable auto sliding carousel -vertical" src="https://codepen.io/onkarruikar/embed/RwZzrMp?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true"
  allowfullscreen="true">
  See the Pen <a href="https://codepen.io/onkarruikar/pen/RwZzrMp">
  CSS only - A scalable auto sliding carousel -vertical</a> by OnkarRuikar (<a href="https://codepen.io/onkarruikar">@onkarruikar</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>