CSS3 animation ÊôÐÔ
ʵÀý
ʹÓüòдÊôÐÔ£¬½«¶¯»Óë div ÔªËØ°ó¶¨£º
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari ºÍ Chrome */
}
ä¯ÀÀÆ÷Ö§³Ö
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
Internet Explorer 10¡¢Firefox ÒÔ¼° Opera Ö§³Ö animation ÊôÐÔ¡£
Safari ºÍ Chrome Ö§³ÖÌæ´úµÄ -webkit-animation ÊôÐÔ¡£
×¢ÊÍ£ºInternet Explorer 9 ÒÔ¼°¸üÔçµÄ°æ±¾²»Ö§³Ö animation ÊôÐÔ¡£
¶¨ÒåºÍÓ÷¨
animation ÊôÐÔÊÇÒ»¸ö¼òдÊôÐÔ£¬ÓÃÓÚÉèÖÃÁù¸ö¶¯»ÊôÐÔ£º
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
×¢ÊÍ£ºÇëʼÖչ涨 animation-duration ÊôÐÔ£¬·ñÔòʱ³¤Îª 0£¬¾Í²»»á²¥·Å¶¯»ÁË¡£
ĬÈÏÖµ£º | none 0 ease 0 1 normal |
---|---|
¼Ì³ÐÐÔ£º | no |
°æ±¾£º | CSS3 |
JavaScript Óï·¨£º | object.style.animation="mymove 5s infinite" |
Óï·¨
animation: name duration timing-function delay iteration-count direction;
Öµ | ÃèÊö |
---|---|
animation-name | ¹æ¶¨ÐèÒª°ó¶¨µ½Ñ¡ÔñÆ÷µÄ keyframe Ãû³Æ¡£¡£ |
animation-duration | ¹æ¶¨Íê³É¶¯»Ëù»¨·ÑµÄʱ¼ä£¬ÒÔÃë»òºÁÃë¼Æ¡£ |
animation-timing-function | ¹æ¶¨¶¯»µÄËÙ¶ÈÇúÏß¡£ |
animation-delay | ¹æ¶¨ÔÚ¶¯»¿ªÊ¼Ö®Ç°µÄÑÓ³Ù¡£ |
animation-iteration-count | ¹æ¶¨¶¯»Ó¦¸Ã²¥·ÅµÄ´ÎÊý¡£ |
animation-direction | ¹æ¶¨ÊÇ·ñÓ¦¸ÃÂÖÁ÷·´Ïò²¥·Å¶¯»¡£ |
Ïà¹ØÒ³Ãæ
CSS3 ½Ì³Ì£ºCSS3 ¶¯»