CSS Animatable

ความหมายและการใช้งาน

บางคุณสมบัติ CSS มี animatable หมายความว่าพวกเขาสามารถนำมาใช้ในการเคลื่อนไหวและการเปลี่ยน

คุณสมบัติ Animatable สามารถเปลี่ยนค่อยๆจากมูลค่าหนึ่งไปยังอีกเช่นขนาดตัวเลขร้อยละและสี

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ภาพเคลื่อนไหว CSS

ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า


4.0 -webkit-	10.0	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-

ตัวอย่าง

เคลื่อนไหวพื้นหลังสีจากสีแดงเป็นสีฟ้า:

/* Code for Chrome, Safari and Opera */
@-webkit-keyframes mymove {
    from {background-color: red;}
    to {background-color: blue;}
}

/* Standard syntax */
@keyframes mymove {
    from {background-color: red;}
    to {background-color: blue;}
}

ลองตัวเอง»

คุณสมบัติ Animatable

คุณสมบัติเหล่านี้เป็น animatable ใน CSS:

คุณสมบัติ
background Try it
background-color Try it
background-position Try it
background-size Try it
border Try it
border-bottom Try it
border-bottom-color Try it
border-bottom-left-radius Try it
border-bottom-right-radius Try it
border-bottom-width Try it
border-color Try it
border-left Try it
border-left-color Try it
border-left-width Try it
border-right Try it
border-right-color Try it
border-right-width Try it
border-spacing Try it
border-top Try it
border-top-color Try it
border-top-left-radius Try it
border-top-right-radius Try it
border-top-width Try it
bottom Try it
box-shadow Try it
clip Try it
color Try it
column-count Try it
column-gap Try it
column-rule Try it
column-rule-color Try it
column-rule-width Try it
column-width Try it
columns Try it
filter Try it
flex
flex-basis Try it
flex-grow Try it
flex-shrink Try it
font Try it
font-size Try it
font-size-adjust
font-stretch
font-weight Try it
height Try it
left Try it
letter-spacing Try it
line-height Try it
margin Try it
margin-bottom Try it
margin-left Try it
margin-right Try it
margin-top Try it
max-height Try it
max-width Try it
min-height Try it
min-width Try it
opacity Try it
order Try it
outline Try it
outline-color Try it
outline-offset Try it
outline-width Try it
padding Try it
padding-bottom Try it
padding-left Try it
padding-right Try it
padding-top Try it
มุมมอง ลอง
perspective-origin Try it
right Try it
text-decoration-color Try it
text-indent Try it
text-shadow Try it
top Try it
transform Try it
transform-origin Try it
vertical-align Try it
visibility
width Try it
word-spacing Try it
z-index Try it

❮ก่อนหน้า ถัดไปอ้างอิง❯

CSS การอ้างอิง

CSS คุณสมบัติ

CSS Animatable

ความหมายและการใช้งาน

สนับสนุนเบราว์เซอร์

ตัวอย่าง

คุณสมบัติ Animatable