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

VUE