CSS
एनिमेशन

वाक्य - विन्यास

• transition: <property> <duration> <timing-function> <delay>;
• @keyframes <identifier>
• [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

पैरामीटर

संक्रमण संपत्ति के साथ एनिमेशन

सरल एनिमेशन के लिए उपयोगी, CSS transition गुण राज्यों के बीच संख्या-आधारित CSS गुणों को चेतन करने की अनुमति देता है।

उदाहरण

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

परिणाम देख

डिफ़ॉल्ट रूप से, .Example वर्ग वाले किसी तत्व पर होवर करने से तत्व की ऊँचाई 120px तक उछल जाएगी और उसका पृष्ठभूमि रंग लाल ( #ff0000 ) हो जाएगा।

transition गुण जोड़कर, हम समय के साथ इन परिवर्तनों को उत्पन्न कर सकते हैं:

.Example{
    ...
    transition: all 400ms ease;
}

परिणाम देख

all मान सभी संगत (संख्या-आधारित) गुणों पर संक्रमण लागू करते हैं। इस कीवर्ड के लिए किसी भी संगत संपत्ति का नाम (जैसे height या top ) प्रतिस्थापित किया जा सकता है।

400ms संक्रमण के समय की मात्रा को निर्दिष्ट करता है। इस मामले में, तत्व के ऊंचाई में परिवर्तन को पूरा करने में 400 मिलीसेकंड लगेगा।

अंत में, मूल्य ease एनीमेशन फ़ंक्शन है, जो निर्धारित करता है कि एनीमेशन कैसे खेला जाता है। ease अर्थ है, धीमी गति से शुरू करना, गति बढ़ाना, फिर धीमे धीमे समाप्त होना। अन्य मान linear , ease-out और ease-in ।

क्रॉस-ब्राउज़र संगतता

transition गुण आम तौर पर सभी प्रमुख ब्राउज़रों में अच्छी तरह से समर्थित है, IE 9 को छोड़कर। फ़ायरफ़ॉक्स और वेबकिट-आधारित ब्राउज़र के पुराने संस्करणों के लिए, विक्रेता उपसर्गों का उपयोग करें:

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

नोट: transition संपत्ति इकाई की परवाह किए बिना किसी भी दो संख्यात्मक मूल्यों के बीच परिवर्तन कर सकती है। यह इकाइयों के बीच संक्रमण भी कर सकता है, जैसे 100px से 50vh । हालाँकि, यह एक संख्या और एक डिफ़ॉल्ट या स्वचालित मूल्य के बीच संक्रमण नहीं कर सकता है, जैसे कि किसी तत्व की ऊँचाई को 100px से auto 100px ।

`इच्छा-परिवर्तन` विशेषता का उपयोग करते हुए एनीमेशन प्रदर्शन को बढ़ाना

एनिमेशन और अन्य जीपीयू-भारी कार्यों का निर्माण करते समय, will-change विशेषता को समझना महत्वपूर्ण है।

सीएसएस कीफ्रेम और transition संपत्ति दोनों GPU त्वरण का उपयोग करते हैं। डिवाइस के GPU के लिए गणना को ऑफलोड करके प्रदर्शन बढ़ाया जाता है। यह पेंट परतों (पृष्ठ के कुछ हिस्सों को व्यक्तिगत रूप से प्रदान किया जाता है) का निर्माण करके किया जाता है जो कि गणना किए जाने के लिए जीपीयू से लोड होते हैं। will-change प्रॉपर्टी ब्राउज़र को बताती है कि क्या चेतन होगा, जिससे ब्राउज़र को छोटे पेंट क्षेत्र बनाने की अनुमति मिलती है, जिससे प्रदर्शन में वृद्धि होती है।

will-change प्रॉपर्टी एनिमेटेड होने के लिए संपत्तियों की अल्पविराम से अलग की गई सूची को स्वीकार करती है। उदाहरण के लिए, यदि आप किसी वस्तु को बदलने और उसकी अस्पष्टता को बदलने की योजना बनाते हैं, तो आप निर्दिष्ट करेंगे:

.Example{
    ...
    will-change: transform, opacity;
}

नोट: विरल will-change उपयोग करें। किसी पृष्ठ पर प्रत्येक तत्व के लिए सेटिंग will-change प्रदर्शन समस्याएं हो सकती हैं, क्योंकि ब्राउज़र हर तत्व के लिए पेंट लेयर्स बनाने का प्रयास कर सकता है, जिससे GPU द्वारा की जाने वाली प्रसंस्करण की मात्रा में काफी वृद्धि हो सकती है।

Keyframes के साथ एनिमेशन

मल्टी-स्टेज सीएसएस एनिमेशन के लिए, आप सीएसएस @keyframes बना सकते हैं। कीफ़्रेम आपको कई जटिल बिंदुओं को परिभाषित करने के लिए कीफ़्रेम नामक कई एनीमेशन बिंदुओं को परिभाषित करने की अनुमति देता है।

मूल उदाहरण

इस उदाहरण में, हम एक मूल पृष्ठभूमि एनीमेशन बनाएंगे, जो सभी रंगों के बीच में है।

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

परिणाम देख

यहां ध्यान देने योग्य कुछ अलग चीजें हैं। सबसे पहले, वास्तविक @keyframes सिंटैक्स।

@keyframes rainbow-background{

यह एनीमेशन का नाम rainbow-background सेट करता है।

0%     { background-color: #ff0000; }

यह एनीमेशन के भीतर कीफ़्रेम की परिभाषा है। पहला भाग, मामले में 0% , परिभाषित करता है कि एनीमेशन के दौरान कीफ़्रेम कहाँ है। 0% अर्थ है कि यह शुरुआत से कुल एनीमेशन समय का 0% है।

एनीमेशन स्वचालित रूप से keyframes के बीच संक्रमण होगा। इसलिए, अगली पृष्ठभूमि का रंग 8.333% पर सेट करके, एनीमेशन आसानी से उन keyframes के बीच संक्रमण के लिए 8.333% समय लेगा।

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

यह कोड उन सभी तत्वों के लिए हमारे एनीमेशन को जोड़ता है जिनके पास .RainbowBackground क्लास है।

वास्तविक एनीमेशन संपत्ति निम्नलिखित तर्क लेती है।

• एनीमेशन-नाम : हमारे एनीमेशन का नाम। इस मामले में, rainbow-background
• एनीमेशन-अवधि : एनीमेशन में कितना समय लगेगा, इस मामले में 5 सेकंड।
• एनीमेशन-पुनरावृत्ति-गणना (वैकल्पिक) : एनीमेशन लूप की संख्या जितनी बार होगी। इस मामले में, एनीमेशन अनिश्चित काल तक चलेगा। डिफ़ॉल्ट रूप से, एनीमेशन एक बार खेलेंगे।
• एनीमेशन-देरी (वैकल्पिक) : निर्दिष्ट करता है कि एनीमेशन शुरू होने से पहले कितनी देर तक इंतजार करना होगा। यह 0 सेकंड तक चूकता है, और नकारात्मक मान ले सकता है। उदाहरण के लिए, -2s अपने एनिमेशन को 2 सेकेंड में शुरू कर देगा।
• एनीमेशन-टाइमिंग-फंक्शन (वैकल्पिक) : एनीमेशन की गति वक्र को निर्दिष्ट करता है। यह ease से ease , जहां एनीमेशन धीमा शुरू होता है, तेजी से बढ़ता है और धीमी गति से समाप्त होता है।

इस विशेष उदाहरण में, दोनों 0% और 100% keyframes निर्दिष्ट { background-color: #ff0000; } । जहाँ भी दो या दो से अधिक keyframes राज्य साझा करते हैं, एक उन्हें एक बयान में निर्दिष्ट कर सकता है। इस मामले में, दो 0% और 100% लाइनों को इस एकल लाइन से बदला जा सकता है:

0%, 100%     { background-color: #ff0000; }

क्रॉस-ब्राउज़र संगतता

पुराने WebKit- आधारित ब्राउज़रों के लिए, आपको @keyframes घोषणा और animation प्रॉपर्टी, दोनों पर विक्रेता के उपसर्ग का उपयोग करने की आवश्यकता होगी, जैसे:

@-webkit-keyframes{}

-webkit-animation: ...

सिंटेक्स उदाहरण

हमारा पहला सिंटैक्स उदाहरण सभी उपलब्ध गुणों / मापदंडों का उपयोग करके एनीमेशन शॉर्टहैंड संपत्ति दिखाता है:

  animation: 3s         ease-in           1s      2                 reverse     both        paused       slidein;
  /*         duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name   */

हमारा दूसरा उदाहरण थोड़ा और सरल है, और दिखाता है कि कुछ गुणों को छोड़ा जा सकता है:

  animation: 3s         linear            1s      slidein;
  /*         duration | timing-function | delay | name   */

हमारा तीसरा उदाहरण सबसे न्यूनतम घोषणा दर्शाता है। ध्यान दें कि एनीमेशन-नाम और एनीमेशन-अवधि घोषित की जानी चाहिए:

  animation: 3s         slidein;
  /*         duration | name */

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

अगर संक्षिप्तता आपकी चीज नहीं है, तो आप शॉर्टहैंड प्रॉपर्टी को भी छोड़ सकते हैं और प्रत्येक प्रॉपर्टी को अलग-अलग लिख सकते हैं:

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;