CSS में एनिमेशन प्रभाव

एनीमेशन गति प्रभाव बनाने और उपस्थिति को बदलने की प्रक्रिया है। घटना गति को बदलने के लिए CSS विभिन्न एनीमेशन प्रभावों का समर्थन करता है।

एनिमेशन के तहत, एक अवधारणा कीफ्रेम का उपयोग किया जाता है। कीफ़्रेम CSS3 में मध्यवर्ती एनिमेशन चरणों को नियंत्रित करेंगे।

नीचे दिया गया उदाहरण कीफ़्रेम सिंटैक्स के साथ ऊंचाई, चौड़ाई, रंग, नाम और एनिमेशन की अवधि दिखाता है -

सिंटैक्स

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}

div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}