这个主意是通过一个简单的接口来访问CSS动画，实际上之前的Morf.js和CSSA中都有这样的处理，大部分代码已经有了，只需要整整，按照Chris所建议的接口风格写下来
从GitHub下载CSS Animation Store
下面是CSS Animation Store的基本接口（关于代码如何工作的信息），将代码放在标签之前，会创建一个全局的对象 CSSAnimations，这个对象包含所有当前可以使用的CSS动画
比如，获取名称为”spin”的动画，你可以按下面的代码：
var spin = CSSAnimations.spin
参数spin是一个KeyframeAnimation实例，有下面的属性和函数：
keyframes – KeyframeRule 集合
original – 原始对象 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型
getKeyframeTexts() – 返回所有keyframe文本集合, e.g. [‘0%’, ‘50%’, ‘100%’]
getKeyframe(text) – 返回指定文字的 KeyframeRule 对象, e.g. getKeyframe(‘0%’)
setKeyframe(text, css) – 设置新的CSS, e.g.setKeyframe(‘10%’, {background: ‘red’, ‘font-size': ‘2em’})
可以看出，KeyframeRule提供了一些方法和函数，是对 WebKitCSSKeyframeRule 和MozCSSKeyframeRule （注意是frame不是frames）的封装，具有下面的属性和方法
css – 该keyframe的css内容, e.g. {background: ‘red’, ‘font-size': ‘2em’}
keyText – 该帧的名称, e.g. 10%
original – 原始对象 WebKitCSSKeyframeRule 或者MozCSSKeyframeRule
示例
获取动画中的所有帧
var spin = CSSAnimations.spin
for(var i=0i<spin.keyframes.lengthi++)
console.log(spin.keyframes[i].css)
修改动画中的某一帧
var spin = CSSAnimations.spin
spin.setKeyframe('10%', {background: 'red', 'font-size': '2em'})
反馈
给我博客或者GitHub留言，让我知道你的想法，我还开放了修改和增加的权限
使用原生JavaScript访问和创建CSS动画
如果你不想使用CSS Animation Store，或者只是想知道它的实现原理，可以参看下面的介绍
访问CSS动画
可以通过CSSOM访问keyframe动画，下面是我CSSA中的代码，用于访问指定的CSS动画
通过下面这条语获取transform的值[javascript] view plain copy
$(objName).css('transform')
很遗憾，获取到的是如下一个矩阵
[javascript] view plain copy
matrix(a,b,c,d,e,f)
哈哈，看到这个矩阵，很多人都懵了，但是真想获取rotate的角度怎么办，以下是我总结的一些函数：
[javascript] view plain copy
/*
* 解析matrix矩阵，0°-360°，返回旋转角度
* 当a=b||-a=b,0<=deg<=180
* 当-a+b=180,180<=deg<=270
* 当a+b=180,270<=deg<=360
*
* 当0<=deg<=180,deg=d
* 当180<deg<=270,deg=180+c
* 当270<deg<=360,deg=360-(c||d)
* */
function getmatrix(a,b,c,d,e,f){
var aa=Math.round(180*Math.asin(a)/ Math.PI)
var bb=Math.round(180*Math.acos(b)/ Math.PI)
var cc=Math.round(180*Math.asin(c)/ Math.PI)
var dd=Math.round(180*Math.acos(d)/ Math.PI)
var deg=0
if(aa==bb||-aa==bb){
deg=dd
}else if(-aa+bb==180){
deg=180+cc
}else if(aa+bb==180){
deg=360-cc||360-dd
}
return deg>=360?0:deg
//return (aa+','+bb+','+cc+','+dd)
}
[javascript] view plain copy
//旋转
[javascript] view plain copy
var obj=$('#id')
obj.click(function(){
var deg=eval('get'+obj.css('transform'))//构造getmatrix函数,返回上次旋转度数
var step=45//每次旋转多少度
obj.css({'transform':'rotate('+(deg+step)%360+'deg)'})
})
这样就ok了，可以自己深入研究一下transform的matrix
