基于css3 animation和transition的動(dòng)畫類庫，可以方便的使用js來調(diào)用。
不過因?yàn)樗袑?shí)現(xiàn)均基于css3，所以不能像tweenmax那樣使用到其他對(duì)象，只能作用于dom對(duì)象的css屬性（可以查閱animation和transition可使用的css屬性）。
API
CT.get(target, param);
CT.set(target, params);
CT.fromTo(target, duration, fromParams, toParams);
CT.from(target, duration, fromParams);
CT.to(target, duration, toParams);
CT.kill(target);
CT.killAll();
param為字符串，
Params為數(shù)組，
以下是所有配置屬性:
type設(shè)置為'a'使用animation,不設(shè)置則使用transition(transiton動(dòng)畫的創(chuàng)建效率高于animation,但沒有animation那樣豐富的功能和回調(diào))
ease設(shè)置緩動(dòng)，
delay設(shè)置延時(shí)時(shí)間，
onEnd設(shè)置運(yùn)動(dòng)完成的返回函數(shù)，
onEndParams設(shè)置返回函數(shù)的參數(shù)，
只有當(dāng)type:'a'時(shí)以下屬性才能起作用
repeat設(shè)置重復(fù)次數(shù)，
yoyo設(shè)置重復(fù)時(shí)反向，
onStart設(shè)置運(yùn)動(dòng)開始的返回函數(shù)，
onStartParams設(shè)置開始返回函數(shù)的參數(shù)，
onRepeat設(shè)置運(yùn)動(dòng)循環(huán)中每個(gè)運(yùn)動(dòng)完成的返回函數(shù)，
onRepeatParams設(shè)置運(yùn)動(dòng)完成返回函數(shù)的參數(shù)，
緩動(dòng)類
CT.Linear
CT.Quad
CT.Quart
CT.Back
除了CT.Linear只有None一項(xiàng)，其他均有In,InOut,Out三項(xiàng)選擇。
以上方法和參數(shù)均是參考TweenMax的方式，有使用經(jīng)驗(yàn)了會(huì)很容易上手。
<!DOCTYPE HTML>
<html>
<head>
<script src="../csstween.js"></script>
<style>
body{
background: #000;
font-size: 14px;
}
.b1{
width: 100%;
height: 100%;
}
.box{
width: 100px;
height: 100px;
}
#box1{
background: #f00;
margin-left: 100px;
}
#box2{
background: #0f0;
margin-left: 200px;
}
#box3{
background: #00f;
}
</style>
</head>
<body>
<div class="b1">
<div id="box1" class="box">
</div>
<div id="box2" class="box">
</div>
<div id="box3" class="box">
</div>
</div>
<script>
setTimeout(function(){console.log('start');
CT.to('.b1 #box2', 1, {marginTop:300, opacity:1, ease:CT.Quad.InOut, onEnd:function(){
console.log("complete1");
CT.from('.b1 #box2', 1, {marginTop:100, opacity:0.5, ease:CT.Quad.Out, onEnd:function(){
console.log("complete2");
CT.fromTo('.b1 #box2', 2, {marginLeft:500, opacity:0.5}, {marginLeft:400, opacity:1, ease:CT.Quad.Out, onEnd:function(n){
console.log("complete3", this, n);
}, onEndParams:[50]});
}});
}});
}, 500);
CT.fromTo('.b1 #box1', 1, {
marginLeft:300,
transform:'rotate(80deg)',
opacity:0
}, {
type:'a',
marginLeft:200,
transform:'rotate(300deg)',
opacity:0.5,
repeat:5,
yoyo:true,
delay:1,
ease:CT.Quart.Out,
onStart:function(){
console.log("start");
},
onIteration:function(){
console.log("iteration");
},
onEnd:function(){
console.log("complete");
}
});
</script>
</body>
</html>
