Delay Animation with CSS only

Question

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?

Does this answer your question? CSS animation delay in repeating — Mahozad
– Mahozad, Commented May 8, 2022 at 9:28

Feroz · Accepted Answer · 2021-11-24 04:23:29Z

3

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>

answered Nov 24, 2021 at 4:23

Feroz

5563 silver badges14 bronze badges

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

2 Comments

anthonyjdella Over a year ago

Thanks, so if I want to add an even longer delay/pause, do I just keep adding more keyframe points?

Feroz Over a year ago

if you want to use only css. yes.

the Hutt · Accepted Answer · 2021-11-24 07:23:34Z

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>

Collectives™ on Stack Overflow

Delay Animation with CSS only

How can I pause the animation FOR EACH WORD?

How can I pause the animation FOR EACH WORD?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

How can I pause the animation FOR EACH WORD?

How can I pause the animation FOR EACH WORD?

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related