Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से एनिमेशन कितनी बार चले, सेट करें


CSS के साथ एनिमेशन कितनी बार चलनी चाहिए, यह सेट करने के लिए animation-iteration-count प्रॉपर्टी का उपयोग करें।

निम्न उदाहरण एनिमेशन की गिनती 2 सेट करता है:

उदाहरण

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;             height: 200px;             background-color: yellow;             animation-name: myanim;             animation-duration: 2s;             animation-iteration-count: 2;          }          @keyframes myanim {          from {             background-color: green;          }          to {                background-color: blue;             }          }       </style>    </head>    <body>       <div> </div>    </body> </html>

  1. - CSS के साथ ग्रेडिएंट बैकग्राउंड कलर कैसे सेट करें

    CSS के साथ ग्रेडिएंट बैकग्राउंड कलर सेट करने के लिए, आपको linear-gradient() फ़ंक्शन को अपनी background प्रॉपर्टी में जोड़ना होगा। आइए एक साधारण बॉक्स क्लास बनाएं और इसे आज़माएं: <div class=box></div> .box { width: 200px; height: 200px; background: linear-gradient(yellow, red); } परिणाम:

  1. CSS के साथ एक सिंपल लूपिंग बैकग्राउंड कलर एनिमेशन कैसे बनाएं CSS के साथ एक सिंपल लूपिंग बैकग्राउंड कलर एनिमेशन कैसे बनाएं

    कीफ्रेम्स और विभिन्न CSS एनिमेशन प्रॉपर्टीज़ का उपयोग करके शुद्ध CSS के साथ एक सिंपल एनिमेटेड बैकग्राउंड कलर लूप बनाना सीखें। इस उदाहरण में, हम HTML <body> एलिमेंट को सीधे CSS के साथ टारगेट कर रहे हैं, लेकिन आप निम्नलिखित कोड उदाहरण को किसी भी HTML एलिमेंट, क्लास, या आईडी पर लागू कर सकते हैं।

  1. CSS के साथ टाइपराइटर एनिमेशन कैसे बनाएं CSS के साथ टाइपराइटर एनिमेशन कैसे बनाएं

    परिचय CSS एनिमेशन की मदद से, हम जावास्क्रिप्ट का उपयोग करके टाइपराइटर एनिमेशन बना सकते हैं। यह प्रभाव टेक्स्ट को कैरेक्टर दर कैरेक्टर टाइप होते हुए दिखाता है, जिसमें ब्लिंकिंग कर्सर होता है। उदाहरण: CSS-ओनली टाइपराइटर प्रभाव div { overflow: hidden; animation: enter 4s steps(30, end),