@keyframes कमांड

@keyframes कमांड एनिमेशन की कीफ्रेम को परिभाषित करती है। कीफ्रेम हमारे CSS एलिमेंट के विभिन्न गुणों को दर्शाता है, उदाहरण के लिए, स्थिति, आकार, रंग आदि, जो एलिमेंट पर निर्दिष्ट समय पर लागू होते हैं।

सिंटैक्स

css@keyframes एनिमेशन का नाम {
  कीफ्रेम
}

उदाहरण

कीफ्रेम परिभाषित करना:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: anim 3s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

उदाहरण

आइए अब अपने वर्ग को एनिमेशन की सहायता से ऊपर से नीचे ले जाएं:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-top: 0%;
  }
  to {
    margin-top: 10%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

उदाहरण

आइए प्रतिशत में कीफ्रेम निर्धारित करके एनिमेशन की सहायता से अपनी आकृति की चौड़ाई बढ़ाएं:

html<div id="elem"></div>

css@keyframes anim {
  from {
    width: 10%;
  }
  to {
    width: 40%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

उदाहरण

आइए अब अपनी आकृति की पारदर्शिता (opacity) बदलें:

html<div id="elem"></div>

css@keyframes anim {
  from {
    background-color: #467CBC;
  }
  to {
    background-color: #C2DDFD;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

यह भी देखें