CSS3 animation-direction ÊôÐÔ
ʵÀý
ÔÝÍ£¶¯»£º
div
{
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari ºÍ Chrome */
}
ä¯ÀÀÆ÷Ö§³Ö
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
Internet Explorer 10¡¢Firefox ÒÔ¼° Opera Ö§³Ö animation-direction ÊôÐÔ¡£
Safari ºÍ Chrome Ö§³ÖÌæ´úµÄ -webkit-animation-direction ÊôÐÔ¡£
×¢ÊÍ£ºInternet Explorer 9 ÒÔ¼°¸üÔçµÄ°æ±¾²»Ö§³Ö animation-direction ÊôÐÔ¡£
¶¨ÒåºÍÓ÷¨
animation-direction ÊôÐÔ¶¨ÒåÊÇ·ñÓ¦¸ÃÂÖÁ÷·´Ïò²¥·Å¶¯»¡£
Èç¹û animation-direction ÖµÊÇ "alternate"£¬Ôò¶¯»»áÔÚÆæÊý´ÎÊý£¨1¡¢3¡¢5 µÈµÈ£©Õý³£²¥·Å£¬¶øÔÚżÊý´ÎÊý£¨2¡¢4¡¢6 µÈµÈ£©Ïòºó²¥·Å¡£
×¢ÊÍ£ºÈç¹û°Ñ¶¯»ÉèÖÃΪֻ²¥·ÅÒ»´Î£¬Ôò¸ÃÊôÐÔûÓÐЧ¹û¡£
ĬÈÏÖµ£º | normal |
---|---|
¼Ì³ÐÐÔ£º | no |
°æ±¾£º | CSS3 |
JavaScript Óï·¨£º | object.style.animationDirection="alternate" |
Óï·¨
animation-direction: normal|alternate;
Öµ | ÃèÊö | ²âÊÔ |
---|---|---|
normal | ĬÈÏÖµ¡£¶¯»Ó¦¸ÃÕý³£²¥·Å¡£ | ²âÊÔ |
alternate | ¶¯»Ó¦¸ÃÂÖÁ÷·´Ïò²¥·Å¡£ | ²âÊÔ |
Ïà¹ØÒ³Ãæ
CSS3 ½Ì³Ì£ºCSS3 ¶¯»