Întârziere de Animație numai cu CSS

Question 1

Am urmatorul cod care se rotește cuvinte cu o animație CSS. Încerc să-mi dau seama cum de a întrerupe animație pe fiecare cuvânt, înainte de a trece la următorul cuvânt. Am încercat, folosind animation-delaydar asta se aplică doar la început de animație, mai degrabă decât fiecare element.

Cum pot întrerupe animație PENTRU FIECARE CUVÂNT?

.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>

Cum pot întrerupe animație PENTRU FIECARE CUVÂNT?

Question 2

Nevoie pentru a păstra același transforma de cuplu de moment, apoi declanșa următoarea. Vă rugăm să urmați codul de mai jos și veți înțelege ce vreau să spun.

.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>

Question 3

Întârziere funcționează doar o singură dată de la început. Deci nu merge cu mai multe iterații. Aveți nevoie pentru a adăuga rame goale ca Feroz suggestd.
Aici este un thread despre acelasi subiect: CSS animație întârziere în repetarea

Ceea ce se încearcă este un fel de carusel vertical. Uita-te pentru CSS numai carusele. Următoarele este un exemplu, puteți repurpose-l să alunece de text. Aveți nevoie pentru a ajusta animație slideMe pentru a schimba timp de pauză. Faceți clic pe pagină întreagă să-l văd mai bine.

Un 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>

Feroz · Answer 1 · 2021-11-24T04:23:29

Nevoie pentru a păstra același transforma de cuplu de moment, apoi declanșa următoarea. Vă rugăm să urmați codul de mai jos și veți înțelege ce vreau să spun.

.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>

Mulțumesc, deci, dacă nu doriți să adăugați o chiar mai mult întârziere/pauză, nu doar să păstreze adăugarea de mai multe keyframe puncte?

onkar ruikar · Answer 2 · 2021-11-24T07:23:34

Întârziere funcționează doar o singură dată de la început. Deci nu merge cu mai multe iterații. Aveți nevoie pentru a adăuga rame goale ca Feroz suggestd.
Aici este un thread despre acelasi subiect: CSS animație întârziere în repetarea

Ceea ce se încearcă este un fel de carusel vertical. Uita-te pentru CSS numai carusele. Următoarele este un exemplu, puteți repurpose-l să alunece de text. Aveți nevoie pentru a ajusta animație slideMe pentru a schimba timp de pauză. Faceți clic pe pagină întreagă să-l văd mai bine.

Un 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>

Întârziere de Animație numai cu CSS

Problema

Cum pot întrerupe animație PENTRU FIECARE CUVÂNT?

Cum pot întrerupe animație PENTRU FIECARE CUVÂNT?

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie