सीएसएस एनीमेशन से जुड़े गुण

परिभाषा और उपयोग

कुछ CSS गुण एनिमेशन के लिए उपयोगी होते हैं, यानी वे ट्रांजिशन जैसे प्रभावों में भी उपयोगी हैं。

एनिमेशन के लिए सेट किए जा सकने वाले गुण एक मान से दूसरे मान तक अदीच बदल सकते हैं, जैसे आकार, संख्या, प्रतिशत और रंग。

ब्राउज़र समर्थन

तालिका में संख्याएँ पूर्णतः CSS एनिमेशन के समर्थन वाले पहले ब्राउज़र संस्करण को दर्शाती हैं。

-webkit-、-moz- या -o- के बाद की संख्या पहली संस्करण के लिए उपयोग की संख्या दर्शाती है。

43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

उदाहरण

स्क्रीन के बैकग्राउंड को लाल से नीले तक एनिमेशन सेट करें:

@keyframes mymove {
  from {background-color: red;}
  to {background-color: blue;}
}

स्वयं अनुभव करें

एनिमेशन से संबंधित गुण

इस तालिका में CSS में एनिमेशन से संबंधित गुणों के वर्णन दिया गया है:

属性 TIY
background साइट पर प्रयोग करें
background-color साइट पर प्रयोग करें
background-position साइट पर प्रयोग करें
background-size साइट पर प्रयोग करें
border साइट पर प्रयोग करें
border-bottom साइट पर प्रयोग करें
border-bottom-color साइट पर प्रयोग करें
border-bottom-left-radius साइट पर प्रयोग करें
border-bottom-right-radius साइट पर प्रयोग करें
border-bottom-width साइट पर प्रयोग करें
border-color साइट पर प्रयोग करें
border-left साइट पर प्रयोग करें
border-left-color साइट पर प्रयोग करें
border-left-width साइट पर प्रयोग करें
border-right साइट पर प्रयोग करें
border-right-color साइट पर प्रयोग करें
border-right-width साइट पर प्रयोग करें
border-spacing साइट पर प्रयोग करें
border-top साइट पर प्रयोग करें
border-top-color साइट पर प्रयोग करें
border-top-left-radius साइट पर प्रयोग करें
border-top-right-radius साइट पर प्रयोग करें
border-top-width साइट पर प्रयोग करें
bottom साइट पर प्रयोग करें
box-shadow साइट पर प्रयोग करें
clip साइट पर प्रयोग करें
color साइट पर प्रयोग करें
column-count साइट पर प्रयोग करें
column-gap साइट पर प्रयोग करें
column-rule साइट पर प्रयोग करें
column-rule-color साइट पर प्रयोग करें
column-rule-width साइट पर प्रयोग करें
column-width साइट पर प्रयोग करें
columns साइट पर प्रयोग करें
filter साइट पर प्रयोग करें
flex साइट पर प्रयोग करें
flex-basis साइट पर प्रयोग करें
flex-grow साइट पर प्रयोग करें
flex-shrink साइट पर प्रयोग करें
font साइट पर प्रयोग करें
font-size साइट पर प्रयोग करें
font-size-adjust
font-stretch
font-weight साइट पर प्रयोग करें
grid साइट पर प्रयोग करें
grid-area साइट पर प्रयोग करें
grid-auto-columns साइट पर प्रयोग करें
grid-auto-flow साइट पर प्रयोग करें
grid-auto-rows साइट पर प्रयोग करें
grid-column साइट पर प्रयोग करें
grid-column-end साइट पर प्रयोग करें
grid-column-gap साइट पर प्रयोग करें
grid-column-start साइट पर प्रयोग करें
grid-gap साइट पर प्रयोग करें
grid-row साइट पर प्रयोग करें
grid-row-end साइट पर प्रयोग करें
grid-row-gap साइट पर प्रयोग करें
grid-row-start साइट पर प्रयोग करें
grid-template साइट पर प्रयोग करें
grid-template-areas साइट पर प्रयोग करें
grid-template-columns साइट पर प्रयोग करें
grid-template-rows साइट पर प्रयोग करें
height साइट पर प्रयोग करें
left साइट पर प्रयोग करें
letter-spacing साइट पर प्रयोग करें
line-height साइट पर प्रयोग करें
margin साइट पर प्रयोग करें
margin-bottom साइट पर प्रयोग करें
margin-left साइट पर प्रयोग करें
margin-right साइट पर प्रयोग करें
margin-top साइट पर प्रयोग करें
max-height साइट पर प्रयोग करें
max-width साइट पर प्रयोग करें
min-height साइट पर प्रयोग करें
min-width साइट पर प्रयोग करें
object-position साइट पर प्रयोग करें
opacity साइट पर प्रयोग करें
order साइट पर प्रयोग करें
outline साइट पर प्रयोग करें
outline-color साइट पर प्रयोग करें
outline-offset साइट पर प्रयोग करें
outline-width साइट पर प्रयोग करें
padding साइट पर प्रयोग करें
padding-bottom साइट पर प्रयोग करें
padding-left साइट पर प्रयोग करें
padding-right साइट पर प्रयोग करें
padding-top साइट पर प्रयोग करें
perspective साइट पर प्रयोग करें
perspective-origin साइट पर प्रयोग करें
right साइट पर प्रयोग करें
text-decoration-color साइट पर प्रयोग करें
text-indent साइट पर प्रयोग करें
text-shadow साइट पर प्रयोग करें
top साइट पर प्रयोग करें
transform साइट पर प्रयोग करें
transform-origin साइट पर प्रयोग करें
vertical-align साइट पर प्रयोग करें
visibility
width साइट पर प्रयोग करें
word-spacing साइट पर प्रयोग करें
z-इंडेक्स साइट पर प्रयोग करें