एनिमेशन-ड्यूरेशन प्रॉपर्टी

animation-duration प्रॉपर्टी एनिमेशन की अवधि सेट करती है।

सिंटैक्स

cssसिलेक्टर {
  animation-duration: s या ms में समय;
}

वैल्यूज

वैल्यू विवरण
s सेकंड में समय निर्दिष्ट करता है (उदाहरण के लिए 3s)।
ms मिलीसेकंड में समय निर्दिष्ट करता है (उदाहरण के लिए 3ms)। एक सेकंड 1000 मिलीसेकंड के बराबर होता है।

डिफॉल्ट वैल्यू: 0s.

उदाहरण

इस उदाहरण में एनिमेशन 3 सेकंड के लिए चलेगा:

html<div id="elem"></div>
css@keyframes move {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

यह भी देखें

  • animation-name प्रॉपर्टी,
    जो एनिमेशन का नाम सेट करती है
  • animation-delay प्रॉपर्टी,
    जो एनिमेशन शुरू होने से पहले देरी सेट करती है
  • animation-timing-function प्रॉपर्टी,
    जो एनिमेशन की गति सेट करती है
  • animation-iteration-count प्रॉपर्टी,
    जो एनिमेशन के दोहराव की संख्या सेट करती है
  • animation-direction प्रॉपर्टी,
    जो एनिमेशन की दिशा सेट करती है
  • animation-fill-mode प्रॉपर्टी,
    जो एनिमेशन की स्थिति सेट करती है
  • animation-play-state प्रॉपर्टी,
    जो एनिमेशन को रोकने की अनुमति देती है
  • animation प्रॉपर्टी,
    जो एनिमेशन के लिए शॉर्टहैंड है
  • @keyframes कमांड,
    जो एनिमेशन की कीफ्रेम सेट करती है
  • transition स्मूद ट्रांजिशन, जो एलिमेंट पर हॉवर करने पर एनिमेशन प्रदान करते हैं