CSS एनिमेशन

CSS एनिमेशन

CSS HTML एलीमेंट के एनिमेशन प्रभाव को प्रदर्शित कर सकता है, बिना JavaScript या Flash के उपयोग किए!

CSS

इस चापरे में, आप निम्नलिखित एट्रिब्यूट को सीखेंगे:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

एनिमेशन के ब्राउज़र समर्थन

इस तालिका में दिए गए नंबर इस एट्रिब्यूट को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को दर्शाते हैं।

प्रयोग च्रोम आईई फ़ायरफॉक्स सफारी ऑपेरा
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

CSS एनिमेशन क्या है?

एनिमेशन एलीमेंट को एक शैली से दूसरी शैली में धीरे-धीरे बदलता है।

आप किसी भी संख्या के CSS एट्रिब्यूट को एक दूसरे से परिवर्तित कर सकते हैं।

CSS एनिमेशन का उपयोग करने के लिए, आपको पहले एनिमेशन के लिए कुछ कीफ़ेयरब्रेन्स निर्दिष्ट करना चाहिए।

कीफ़ेयरब्रेन्स एलीमेंट को विशेष समय पर रखे गए शैली को दर्शाते हैं।

@keyframes नियम

अगर आप @keyframes यह नियम में CSS शैली को निर्दिष्ट करता है, जिससे एनिमेशन विशेष समय पर वर्तमान शैली से नई शैली में धीरे-धीरे परिवर्तित होगा।

एनिमेशन को प्रभावी बनाने के लिए, इसे किसी एलीमेंट से बांधना जरूरी है।

इस उदाहरण में 'example' एनिमेशन को <div> एलीमेंट से बांधा जाएगा। एनिमेशन 4 सेकंड चलेगा और <div> एलीमेंट का पृष्ठभूमि रंग 'red' से धीरे-धीरे 'yellow' में बदल जाएगा:

उदाहरण

/* एनिमेशन कोड */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* इस एलीमेंट पर एनिमेशन प्रभाव लगाएं */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

स्वयं प्रयोग करें

ध्यान दें:animation-duration एट्रिब्यूट एनिमेशन पूरा होने के लिए कितने समय की जरूरत है, इसे परिभाषित करता है। यदि इसे नहीं निर्दिष्ट किया जाता है animation-duration यदि कोई भी एट्रिब्यूट सेट नहीं किया जाता है, तो एनिमेशन नहीं होगा क्योंकि डिफ़ॉल्ट मान 0s (0 सेकंड) है।

उपरोक्त उदाहरण में, 'from' और 'to' (0% से शुरू और 100% से पूरा) की मान्यता का उपयोग करके, हमने शैली कब परिवर्तित होनी चाहते हैं, इसे सेट किया है।

आप भी प्रतिशत मानों का उपयोग कर सकते हैं। प्रतिशत का उपयोग करके, आपको जरूरत के अनुसार किसी भी संख्या के शैली परिवर्तन जोड़ सकते हैं।

इस उदाहरण में जब एनिमेशन 25% पूरा होगा, 50% पूरा होगा और एनिमेशन 100% पूरा होगा तो <div> एलीमेंट का पृष्ठभूमि रंग बदल जाएगा:

उदाहरण

/* एनिमेशन कोड */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* एनिमेशन लागू करने वाले एलीमेंट */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

स्वयं प्रयोग करें

नीचे के उदाहरण में, एनिमेशन 25%, 50% और 100% पर पृष्ठभूमि रंग और <div> एलीमेंट की स्थिति को बदलेगा:

उदाहरण

/* एनिमेशन कोड */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* एनिमेशन लागू करने वाले एलीमेंट */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

स्वयं प्रयोग करें

एनिमेशन को विलंबित करना

animation-delay इस गुण के द्वारा एनिमेशन शुरू होने के लिए विलंब का समय निर्धारित किया जाता है。

नीचे के उदाहरण में, एनिमेशन शुरू होने से पहले 2 सेकंड का विलंब होगा:

उदाहरण

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

स्वयं प्रयोग करें

नकारात्मक मूल्य भी अनुमति दिया जाता है। यदि नकारात्मक मूल्य का उपयोग किया जाता है, तो एनिमेशन जैसे कि यह N सेकंड पहले चल चुका है, शुरू होगा。

नीचे के उदाहरण में, एनिमेशन जैसे कि यह 2 सेकंड पहले चल चुका है, शुरू होगा:

उदाहरण

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

स्वयं प्रयोग करें

एनिमेशन को चलाने की संख्या सेट करना

animation-iteration-count इस गुण के द्वारा एनिमेशन को चलाने की संख्या निर्धारित की जाती है。

नीचे के उदाहरण में एनिमेशन को स्टॉप होने से पहले 3 बार चलाया जाएगा:

उदाहरण

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

स्वयं प्रयोग करें

इस उदाहरण में वाली "infinite" मूल्य के साथ एनिमेशन हमेशा चलता रहेगा:

उदाहरण

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

स्वयं प्रयोग करें

एनिमेशन को पीछे की ओर अथवा बदले बदले की ओर चलाना

animation-direction इस गुण के द्वारा एनिमेशन को आगे की ओर चलाना, पीछे की ओर चलाना अथवा बदले बदले की ओर चलाना निर्धारित किया जाता है。

animation-direction एट्रिब्यूट को निम्नलिखित मूल्य दिए जा सकते हैं:

  • normal - एनिमेशन सामान्य रूप से चलेगा (आगे की ओर). डिफ़ॉल्ट मूल्य
  • reverse - एनिमेशन पीछे की ओर (पीछे की दिशा में) चलेगा
  • alternate - एनिमेशन पहले आगे की ओर चलेगा, फिर पीछे की ओर
  • alternate-reverse - एनिमेशन पहले पीछे की ओर चलेगा, फिर आगे की ओर

नीचे का उदाहरण एनिमेशन को पीछे की ओर (पीछे की दिशा में) चलाएगा:

उदाहरण

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

स्वयं प्रयोग करें

इस उदाहरण में वाली "alternate" मूल्य के साथ एनिमेशन पहले आगे की ओर चलेगा, फिर पीछे की ओर चलेगा:

उदाहरण

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

स्वयं प्रयोग करें

इस उदाहरण में वाली "alternate-reverse" मूल्य के साथ एनिमेशन पहले पीछे की ओर चलेगा, फिर आगे की ओर चलेगा:

उदाहरण

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

स्वयं प्रयोग करें

एनिमेशन की गति परिक्रमा को निर्धारित करता है

animation-timing-function एट्रिब्यूट एनिमेशन की गति परिक्रमा को निर्धारित करता है。

animation-timing-function एट्रिब्यूट को निम्नलिखित मूल्य दिए जा सकते हैं:

  • ease - शुरू में धीमा, फिर तेज़, फिर धीमा होने वाले एनिमेशन को निर्धारित करता है (डिफ़ॉल्ट)
  • linear - शुरू से समाप्त तक एकसमान गति के एनिमेशन को निर्धारित करता है
  • ease-in - शुरू में धीमा होने वाले एनिमेशन को निर्धारित करता है
  • ease-out - समाप्त दौरान धीमा होने वाले एनिमेशन को निर्धारित करता है
  • ease-in-out - शुरू और समाप्त दोनों को धीमा करने वाले एनिमेशन को निर्धारित करता है
  • cubic-bezier(n,n,n,n) - तीन बेजेल फ़ंक्शन में आप अपने वाले मूल्यों को निर्धारित कर सकते हैं

नीचे दिए गए उदाहरण में इसके उपयोग की विभिन्न गति परिक्रमाएं दिखाई देती हैं:

उदाहरण

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

स्वयं प्रयोग करें

एनिमेशन के भरने के तरीके को निर्धारित करता है

CSS एनिमेशन पहले के महत्वपूर्ण फ्रेम के बगैर या अंतिम महत्वपूर्ण फ्रेम के बाद एलीमेंट पर प्रभाव नहीं डालता है。animation-fill-mode एट्रिब्यूट इस व्यवहार को ओवरराइड कर सकता है。

एनिमेशन को नहीं चलाए जाने पर (शुरू से पहले, समाप्त होने के बाद, या दोनों के दौरान),animation-fill-mode एट्रिब्यूट लक्ष्य एलीमेंट की शैली को निर्धारित करता है。

animation-fill-mode एट्रिब्यूट को निम्नलिखित मूल्य दिए जा सकते हैं:

  • none - डिफ़ॉल्ट मूल्य. एनिमेशन द्वारा एलीमेंट पर किसी शैली को एनिमेशन के पूर्व या पश्चात के दौरान लागू नहीं किया जाएगा。
  • forwards - एलीमेंट अंतिम महत्वपूर्ण फ्रेम से सेट की गई शैली मूल्य को बनाए रखेगा (एनिमेशन-direction और एनिमेशन-iteration-count के आधार पर)。
  • backwards - एलीमेंट द्वारा पहले महत्वपूर्ण फ्रेम से सेट की गई शैली मूल्य प्राप्त की जाएगी (एनिमेशन-direction के आधार पर) और एनिमेशन देरी के दौरान इस मूल्य को बनाए रखा जाएगा。
  • both - एनिमेशन साथ-साथ अगले और पीछे के नियमों का पालन करता है, इससे दोनों दिशाओं में एनिमेशन प्रकृति का विस्तार होता है。

इस उदाहरण में <div> एलीमेंट को एनिमेशन के समाप्त होने पर अंतिम महत्वपूर्ण फ्रेम के शैली मूल्य बनाए रखा जाता है:

उदाहरण

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

स्वयं प्रयोग करें

इस उदाहरण में <div> एलिमेंट को एनीमेशन देरी के दौरान पहले कीफ़ेस्ट बाइकॉन की शैली को प्राप्त करने के लिए सेट किया गया है:

उदाहरण

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

स्वयं प्रयोग करें

इस उदाहरण में <div> एलिमेंट को एनीमेशन शुरू होने से पहले पहले कीफ़ेस्ट बाइकॉन की शैली को प्राप्त करने और एनीमेशन समाप्त होने पर अंतिम कीफ़ेस्ट बाइकॉन की शैली को बनाए रखने के लिए सेट किया गया है:

उदाहरण

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

स्वयं प्रयोग करें

एनीमेशन संक्षिप्त अटिव्स

इस उदाहरण में छह एनीमेशन अटिव्स का इस्तेमाल किया गया है:

उदाहरण

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

स्वयं प्रयोग करें

संक्षिप्त रूप में इस्तेमाल करें animation अटिव्स भी इसी तरह के एनीमेशन प्रभाव को प्राप्त कर सकते हैं:

उदाहरण

div {
  animation: example 5s linear 2s infinite alternate;
}

स्वयं प्रयोग करें

CSS एनीमेशन अटिव्स

इस तालिका में @keyframes नियम और सभी CSS एनीमेशन अटिव्स को सूचीबद्ध किया गया है:

प्रयोग वर्णन
@keyframes एनीमेशन मोड को निर्धारित करता है。
animation सभी एनीमेशन अटिव्स को एक सारणी अटिव के रूप में सेट करता है。
animation-delay एनीमेशन के शुरू होने में देरी को निर्धारित करता है。
animation-direction एनीमेशन किस दिशा में चलना चाहता है (आगे, पीछे, या विकेंद्रित) निर्धारित करता है。
animation-duration एनीमेशन एक चक्र पूरा करने में लगने वाला समय निर्धारित करता है。
animation-fill-mode एलिमेंट के एनीमेशन नहीं चलने वाले समय (शुरू से पहले, समाप्त होने पर, या दोनों) में शैली को निर्धारित करता है。
animation-iteration-count एनीमेशन को चलाने के लिए बार निर्धारित करता है。
animation-name नियमित @keyframes एनीमेशन के नाम को निर्धारित करता है。
animation-play-state एनिमेशन को चलाना या स्तब्ध करना का वक्तव्य करता है।
animation-timing-function एनिमेशन की गति का वक्तव्य करता है。