आप animation-delay property
प्रत्येक दीर्घवृत्त वर्ण का समय और उपयोग करने का प्रयास कर सकते हैं । इस मामले में मैंने प्रत्येक दीर्घवृत्त चरित्र को रखा है <span class>
ताकि मैं उन्हें अलग से चेतन कर सकूं।
मैंने एक डेमो बनाया , जो बिल्कुल सही नहीं है, लेकिन यह कम से कम मेरा मतलब दिखाता है :)
मेरे उदाहरण से कोड:
एचटीएमएल
Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span>
सीएसएस
.one {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.0s;
animation: dot 1.3s infinite;
animation-delay: 0.0s;
}
.two {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.2s;
animation: dot 1.3s infinite;
animation-delay: 0.2s;
}
.three {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.3s;
animation: dot 1.3s infinite;
animation-delay: 0.3s;
}
@-webkit-keyframes dot {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes dot {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}