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 ¶¯»­

VUE