मैं निम्नलिखित कोड घूमता है जो शब्दों के साथ एक सीएसएस एनीमेशन. मैं कोशिश कर रहा हूँ करने के लिए बाहर आंकड़ा कैसे करने के लिए रोकें एनीमेशन के प्रत्येक शब्द पर जाने से पहले, अगले शब्द के लिए. मैंने कोशिश की है का उपयोग कर animation-delay
, लेकिन यह है कि केवल पर लागू होता है शुरू करने के लिए एनीमेशन की बजाय प्रत्येक आइटम.
कैसे कर सकते हैं मैं एनीमेशन थामने के लिए प्रत्येक शब्द?
.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>