सीएसएस एनिमेशन

CSS जावास्क्रिप्ट या फ्लैश का उपयोग किए बिना HTML तत्वों के एनिमेशन की अनुमति देता है!

सीएसएस

इस अध्याय में आप निम्नलिखित गुणों के बारे में जानेंगे:

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

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

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

Property
@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 , तो निश्चित समय पर एनीमेशन धीरे-धीरे वर्तमान शैली से नई शैली में बदल जाएगा।

काम करने के लिए एक एनीमेशन प्राप्त करने के लिए, आपको एनीमेशन को एक तत्व से बांधना होगा।

निम्न उदाहरण "उदाहरण" एनीमेशन को <div> तत्व से जोड़ता है। एनीमेशन 4 सेकंड तक चलेगा, और यह धीरे-धीरे <div> तत्व के पृष्ठभूमि-रंग को "लाल" से "पीला" में बदल देगा:

उदाहरण

/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

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

ऊपर दिए गए उदाहरण में हमने निर्दिष्ट किया है कि "से" और "से" (जो 0% (प्रारंभ) और 100% (पूर्ण) का प्रतिनिधित्व करता है) कीवर्ड का उपयोग करके शैली कब बदलेगी।

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

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

उदाहरण

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
25% {background-color: yellow;}
  50% {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

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

उदाहरण

/* The animation code */
@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;}
}

/* The element to apply the animation to */
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;
}

एनीमेशन को हमेशा के लिए जारी रखने के लिए निम्न उदाहरण "अनंत" मान का उपयोग करता है:

उदाहरण

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

एनिमेशन को रिवर्स डायरेक्शन या अल्टरनेटिव साइकिल में चलाएं

संपत्ति निर्दिष्ट करती है कि एनीमेशन को 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;
}

निम्नलिखित उदाहरण एनीमेशन को पहले आगे, फिर पीछे की ओर चलाने के लिए "वैकल्पिक" मान का उपयोग करता है:

उदाहरण

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

निम्न उदाहरण एनीमेशन को पहले पीछे की ओर चलाने के लिए "वैकल्पिक-रिवर्स" मान का उपयोग करता है, फिर आगे:

उदाहरण

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गति वक्र निर्दिष्ट करती है।

एनीमेशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी में निम्नलिखित मान हो सकते हैं:

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जब एनीमेशन नहीं चल रहा हो तो संपत्ति लक्ष्य तत्व के लिए एक शैली निर्दिष्ट करती है (शुरू होने से पहले, समाप्त होने के बाद, या दोनों) ।

एनीमेशन-फिल-मोड संपत्ति में निम्नलिखित मान हो सकते हैं:

none- डिफ़ॉल्ट मान। एनिमेशन क्रियान्वित होने से पहले या बाद में तत्व पर कोई शैली लागू नहीं करेगा
forwards- तत्व अंतिम कीफ्रेम द्वारा निर्धारित शैली मूल्यों को बनाए रखेगा (एनीमेशन-दिशा और एनीमेशन-पुनरावृत्ति-गिनती पर निर्भर करता है)
backwards - तत्व शैली मान प्राप्त करेगा जो पहले कीफ़्रेम (एनीमेशन-दिशा पर निर्भर करता है) द्वारा निर्धारित किया जाता है, और एनीमेशन-विलंब अवधि के दौरान इसे बनाए रखता है
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;
}