सीएसएस फॉरएवर में चित्रों को कैसे एनिमेट करें

इस लेख में, हम CSS3 एनिमेशन के इर्द-गिर्द घूमने वाले एक सामान्य प्रश्न को संबोधित करेंगे: उन्हें अनिश्चित काल तक चलाना।

चुनौती

मान लीजिए कि आपके पास फ़ोटो की एक श्रृंखला है जिसे आप स्लाइड शो के रूप में प्रदर्शित करना चाहते हैं, जिसका उपयोग करके उनके बीच आसानी से बदलाव किया जा सकता है CSS3 एनीमेशन. हालाँकि, आप डिफ़ॉल्ट व्यवहार से संतुष्ट नहीं हैं, जहां अंतिम फोटो फीका हो जाता है और पृष्ठ पुनः लोड होता है, स्लाइड शो को प्रभावी ढंग से पुनरारंभ करता है।

समाधान

निर्बाध लूपिंग एनीमेशन प्राप्त करने के लिए, हमें इसकी आवश्यकता है यह निर्दिष्ट करने के लिए सीएसएस को संशोधित करना कि एनीमेशन लगातार दोहराया जाना चाहिए। डिफ़ॉल्ट रूप से, सीएसएस एनिमेशन केवल एक बार चलने के लिए सेट होते हैं।

हम अपने सीएसएस में जो मुख्य संपत्ति जोड़ेंगे वह है एनीमेशन-पुनरावृत्ति-गिनती। यहां एक उदाहरण है:

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

@-moz-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

animation-iteration-count को infinite पर सेट करने से, एनीमेशन अनिश्चित काल तक लूप करता रहेगा, जिससे आपकी तस्वीरों के बीच एक सहज संक्रमण बन जाएगा।