CSS एनीमेशन

CSS एनीमेशन

CSS एचटीएमएल एलीमेंट के एनिमेशन प्रभाव को जोड़ सकता है, बिना जेविस्कॉप या फ्लैश के उपयोग के!

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 शेष के रूप में, शैली को डिफ़ाइन करती है, एनिमेशन विशेष समय में वर्तमान शैली से नई शैली में धीरे-धीरे बदलेगा।

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

इस उदाहरण में, "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 एनीमेशन की गति का रेखाचित्र निर्धारित करता है。