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>