jQuery操作CSS3 animation動畫的測試範例

上次利用jQuery來操作canvas的試次還算順利，所以也想用jQuery來操作CSS3 animation。
可是這次就沒有上次那麼幸運了，無論用選擇器或函數，就是無法操作CSS3 animation。

經google大神的幫助，找到一個jQuery的外掛程式：jQuery-Keyframes
下載網址：https://github.com/jQueryKeyframes/jQuery.Keyframes

另外還要下載一個js：prefixfree
下載網址：http://leaverou.github.io/prefixfree/


-------------------
HTML5的測試原始碼
-------------------
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS TEST</title>
<style>
   .test01 {
   width: 200px;
                height: 210px;
       position:relative;
       top: 0px;
       left: 0px;
                border: 1px solid #999999;
           }
</style>
</head>
<body>
   <section>
   <input id="btn01" type="button" value="TEST"></input>
<div id="jq_test01" class="test01">aaaaaaaaa</div>
</section>
</body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.keyframes.js"></script>
<script type="text/javascript" src="js/prefixfree.min.js"></script>
    <script>
   $(window).load(function(){
$.keyframe.define([{
                name: 'test01',
                '0%': {'left': '270px'},
                '30%': {'left': '10px'},
                '60%': {'left': '230px'},
                '100%': {'left': '10px'}
            }]);
$("#btn01").click(function(){
   $("#jq_test01").playKeyframe('test01 2000ms linear ');
            });
});
</script>
</html>

於
標籤：
  • Line如何換行
    在電腦版的Line輸入文字時，遇到需要換行的情形時，我都是用記事本先寫好再複製上去，這樣就可以有換行的效果，可是這樣的做法好像失去Line的便利性。 於是查了一下，原來有一個設定可以指定Enter換行，而不是發訊息出去。 完成設定之後，要發送訊息就改用Al...
  • 在Windows下，利用tasklist與taskkill來刪除Process
    Windows7 / Windows8 kill process Linux下要刪除某個程序通常會使用 ps 配合 kill 來刪除程序。 例如：ps -ef |grep [PROCESS NAME]       kill -9 [PID] 在Windows下，通常是...
  • 官田新訓中心（渡假村）
    在7月份的時候，利用Google地圖查詢官田區的路線，偶然發現「官田新訓中心(度假村)」，地點卻是我以前當兵時的新訓中心，難道當年的官田新訓中心已經被裁撤，改為飯店還是觀光景點嗎？ 將Google地圖轉為街景模式，看見的還是新訓中心的門口，幾乎與我腦中的印象一樣，沒有什...