è¯æ³•é¡¹ç›® | 说明 |
---|---|
åˆå§‹å€¼ | 1 |
适用于 | æ‰€æœ‰å…ƒç´ |
å¯å¦ç»§æ‰¿ | å¦ |
媒介 | 视觉 |
版本 | CSS3.0 |
number:自定义动画执行次数,设置值å¯ä¸º0或æ£æ•´æ•°ã€‚
infiniteï¼šæ— é™å¾ªçŽ¯ã€‚
.demo_box{ -webkit-animation:f1 2s 0.5s forwards linear; -moz-animation:f1 2s 0.5s forwards linear; position:relative; left:10px; width:100px; height:100px; margin:10px 0; overflow:hidden; } .one{ -webkit-animation-iteration-count:1; -moz-animation-iteration-count:1; } .infinite{ -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; } .some{ -webkit-animation-iteration-count:2,1; -moz-animation-iteration-count:2,1; } @-webkit-keyframes f1{ 0%{left:10px;} 100%{left:500px;} } @-moz-keyframes f1{ 0%{left:10px;} 100%{left:500px;} }
<div class="demo_box one">动画执行1次</div> <div class="demo_box infinite">åŠ¨ç”»æ‰§è¡Œæ— æ•°æ¬¡</div> <div class="demo_box some">这个ä¸çŸ¥é“</div>
IE | Firefox | Opera | Safari | Chrome |
---|---|---|---|---|
IE 10+ | Firefox 3.5+ | ç›®å‰æš‚æ— ç‰ˆæœ¬æ”¯æŒ | Safari 10+ | Chrome 2.0+ |