css、jq實現移動（動畫）效果

！！！！！！！！！！！建議先看這些有助理解代碼！！！！！！！！！！！！關於各個參數啊的設置，雖然特別多，可是看一遍有個大概的印象，等遇到你能夠再查。

css：

• @keyframes： http://www.w3school.com.cn/cssref/pr_keyframes.asp
• animation： http://www.w3school.com.cn/cssref/pr_animation.asp
  https://zhidao.baidu.com/question/1893989528889518500.html

jq：

• animation：http://www.w3school.com.cn/jquery/effect_animate.asp

1、CSS

代碼：

<style> div { position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ animation-iteration-count: 1; //規定循環播放次數，不然一直會循環下去 -webkit-animation-fill-mode: forwards; // 設置動畫完成定格到最後一幀，不設置播放完恢復原來的位置 animation-fill-mode: forwards; } @keyframes mymove { from {left:0px;} to {left:200px;} } </style>
<div>Internet Explorer 9 及更早IE版本不支持 animation 屬性。</div>

結果：

2、jq

代碼：

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script> $(function(){ $("#toRight").animate({ marginLeft:"+=100px" },3000); }) </script>
<div id="toRight">右移</div>

效果：

代碼均可以直接跑看效果。