एनिमेशन-ड्यूरेशन प्रॉपर्टी
animation-duration प्रॉपर्टी
एनिमेशन की अवधि सेट करती है।
सिंटैक्स
सिलेक्टर {
animation-duration: s या ms में समय;
}
वैल्यूज
| वैल्यू | विवरण |
|---|---|
s |
सेकंड में समय निर्दिष्ट करता है (उदाहरण के लिए 3s)। |
ms |
मिलीसेकंड में समय निर्दिष्ट करता है (उदाहरण के लिए 3ms)। एक सेकंड 1000 मिलीसेकंड के बराबर होता है। |
डिफॉल्ट वैल्यू: 0s.
उदाहरण
इस उदाहरण में एनिमेशन 3 सेकंड के लिए चलेगा:
<div id="elem"></div>
@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स्मूद ट्रांजिशन, जो एलिमेंट पर हॉवर करने पर एनिमेशन प्रदान करते हैं