在網頁制作的過程中少不了用到各種動畫，形式多種多樣，flash,css,js,canvas,等等都能實現，對於其優劣和效果只能說各有千秋。
什么是動畫效果，其實網頁中的漸變效果就是一種很基礎的動畫，動畫的基礎是時間效果，在規定的時間內完成什么效果。動畫最關鍵的一點還是根據人類的視覺習慣而來，動的東西往往是心靈捕捉的對象。抓住用戶的眼光，以動畫為基礎宣傳自己迫切想表達的並且美化豐富界面內容，也算是動畫的內涵了。
下面提到的是使用jQuery如何實現動畫效果，動畫的要素是動，move當然有需要對css的position屬性進行一定的了解。然后就是時間參數，時間是確定動畫效果的基礎，然后就是運動軌跡，運動軌跡的確定就來源於今天我們學到的animate({})，不得不提的是jQ之所以盛行到今天還是有很多可取的功能，不單單是對於選擇器的使用，其他工具函數和動畫方法也很強大，基本上你能看到的網頁動畫效果它都可以幫助你實現。
下面先附上一個例子，寫的很簡單，新手制作有高手請斧正，謝謝！
html:
<p>點擊動畫</p> <div class="ha">enheng</div>
css:
<style type="text/css"> p { background-color:rgba(240,210,210,1.00); width:70px; height:20px; } .ha { width:100px; height:100px; background-color:rgba(53,178,231,1.00); position:relative; } .cur { background-color:rgba(83,148,236,1.00); } .cur1 { background-color:rgba(37,213,23,1.00); } .cur2 { background-color:rgba(47,44,53,1.00); }
</style>
jQ代碼：
<script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function (){ var ppap = $("p"); var ddad = $(".ha"); var i = 0; var m =100; var n =10; function My(i){ ddad.animate({ "left":m*i, "border-radius":n*i, }); if(i>2,i<3){$(".ha").removeClass("cur2").addClass("cur");} else if(i>3,i<4){$(".ha").removeClass("cur").addClass("cur1");} else{$(".ha").removeClass("cur1").addClass("cur2");}; }; $("p").on("click",function (){ i+=1; if(i>5){i=0}; My(i); }); timer = setInterval(function(){ $("p").trigger("click").css("background","red"); },1000); $(".ha").stop(true,true).mouseover(function (){ clearInterval(timer); }); $(".ha").stop().mouseout(function(){ timer = setInterval(function(){ $("p").trigger("click").css("background","red"); },500); }) }) </script>
ps：首先我們想設計怎樣的動畫，這里簡單舉例，那就是點擊p標簽，然后下面的Div標簽會向右移動，具體的是每次移動100像素移動5次，然后在加載完成后設置了setInterval（）讓其可以自動開始，並且設置了條件，讓他能夠循環開始，下面我們拆解一下代碼。
首先：定義了我們需要的參數ppap和ddad，別想多了我很時尚的，嗯哼，ppap，好的繼續，然后我們定義了全局常量和變量，常量n/m變量i；
其次：我們新定義了一個函數My()，讓他幫我們做一件事，什么事情呢，那就是ddad即Div標簽的運動軌跡，animate({})。里面完成兩件事left和border-radius兩個屬性值發生變化。里面有疑問請百度一下，謝謝。定義好之后，在adimate中可以設置動畫的完成事件，這里我們並沒有使用這個時間而是后面我們對其新建的定時器。
然后：我給P標簽綁定一個點擊事件，在里面我設置了變量的自動增加。和if（）{}條件函數，讓變量i值不超過5，然后這樣就會讓我們的變量循環的動起來。
最后：給自定義的定時器綁定一個函數，幫我們做的事情呢，就是在我們不手動去點擊p標簽能夠自動開始，然后調用trigger（）幫助我們去重復的激活給P元素綁定的點擊事件。然后變量的值就會增加，返回給我們的My(i)，然后有偏移的舉例就會增加，整個過程就循環的動起來了，繼而我們給div綁定兩個mouse鼠標事件，你們看到我換着花樣對選擇器的使用，我也是測試一下，這樣會不會讓代碼出現問題，但是並沒有，由此可見對選擇器來說jQ的確很強大，他們完成的是懸停效果，划過停止，滑出繼續開始動畫。
到這里就結束了對整個動畫的操作，動畫很簡單，也很復雜，具體看實際生活中我們怎么去運用它，我們用的很多的東西，導航，下拉，折疊，手風琴，百葉窗，拖放，焦點圖等等很多的效果，都是一個對於這方面愛好的人員必定去了解和學習的東西，其實一門語言的運用會有很多相同之處，並且同一門語言解決一件動畫也有很多種不同的方法，我們只是站在了別人的肩上，運作別人曾經設定好的東西，真的有一天我們自己有了新的發現那才叫創作，現在的最多叫做擴展延伸，甚至更低。
animate與css中的transition和transform也有很多的共同點，canvas屬於Html5的東西，他的功能也足夠強大，當然了js是其中的核心基礎，原生的js現在看的比什么都重要，作為2017年的熱門語言它還有很大的擴展性，還有很多的運用途徑，這里也沒有辦法全部闡述，就先提到一點關於animate，引入后發現delay（），stop（），隊列動畫（），回調等等。太多的東西需要自己去一步步嘗試和夯實，在接下來還要繼續走向服務器，走向app，ui.......