सरल सीएसएस एनीमेशन लूप: फीका इन और आउट "लोडिंग" टेक्स्ट

सीएसएस में एक लूपिंग एनीमेशन बनाने के लिए जो टेक्स्ट को अंदर और बाहर फीका करता है जावास्क्रिप्ट का उपयोग किए बिना, निम्नलिखित पर विचार करें:

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

@keyframes नियम एनीमेशन को ही परिभाषित करता है। इस मामले में, एनीमेशन बस तत्व की अपारदर्शिता को पूरी तरह से अपारदर्शी से पूरी तरह से पारदर्शी और फिर से वापस बदल देता है।

.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

.animate-flicker वर्ग उस वर्ग के किसी भी तत्व पर एनीमेशन लागू करता है। एनीमेशन प्रॉपर्टी एनीमेशन का नाम, प्रत्येक पुनरावृत्ति की अवधि (इस मामले में, 1 सेकंड) निर्दिष्ट करती है, और क्या एनीमेशन को असीमित रूप से दोहराया जाना चाहिए।

ध्यान देने वाली एक बात यह है कि उपरोक्त कोड काम नहीं कर सकता है सभी ब्राउज़रों में. ब्राउज़रों की व्यापक श्रेणी के साथ अनुकूलता सुनिश्चित करने के लिए, आपको एनीमेशन प्रॉपर्टी में उपयुक्त विक्रेता उपसर्ग जोड़ने की आवश्यकता है। उदाहरण के लिए:

.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

इन विक्रेता उपसर्गों को जोड़ने के साथ, एनीमेशन को अधिकांश आधुनिक ब्राउज़रों में काम करना चाहिए।