JS2CSSKeyframes – 快速便捷创建css3动画规则

现在网页开发中越来越多的会加入各种体现细节或者辅助表现的各类小动画,这类简单的动画用css3来实现简单便捷。但是,由于浏览器间的差异性,我们目前在书写动画帧控制规则(@keyframes)时,往往需要加入浏览器前缀(-webkit-、-moz-等),而且涉及到css3的属性变化时,也是需要考虑到这一点。而这样一来,在css中写入@keyframes规则就变得麻烦无比。

例如著名的 Animate.css,它里面包含了几十种可能会用到的动画类别,虽然它只是兼容了webkit和标准html5规范书写,体积依然达到了接近80K的水平。虽然实际项目中我们一般不会直接引入这个文件,但是即使单独拎出来其中几个,加入对-moz- -o- -ms- 的兼容支持,其维护和修改也会变得麻烦无比。更别说项目中我们根据自己需求定义的一些动画规则,如果后期因为设计、产品的意见产生修改,这就是考验眼力、耐力的一件工作了。

例如下面这个,这个还没有考虑早期opera、ie等一些不那么热门的浏览器的情况下:

传统书写方式
传统书写方式

如何解决这个问题

其实引起修改维护巨大工作量的原因就是html5标准未在各个浏览器上标准统一实现,各个浏览器加入了自己的前缀来实现支持,这就造成了实际开发中去对各个浏览器兼容而产生了巨大的工作量。而解决这一问题的办法无疑是去用javascript来规避浏览器前缀带来的麻烦。

其原理还是类似用javascript创建css规则一样,使用样式表的sheet.insertRule方法。因为@keyframes原则还是css规则(其实浏览器内部有一个CSSKeyframesRule构造器,但是我们无法自行调用):

1
document.styleSheets.item(0).insertRule('@-webkit-keyframes name {from {width:0}, to {width:100px}}', 0);

基于以上的原理,我写了个组件 JS2CSSKeyframes 专门用来创建以及管理页面上的@keyframes动画规则。

JS2CSSKeyframes 也修复了浏览器间差异性,利用JS2CSSKeyframes定义@keyframes时无需书写浏览器前缀。具体样式规则也可以省略前缀,组件会自动根据浏览器支持情况加上相应的前缀。

1
2
3
4
new JS2CSSKeyframes('move',{
    '0%':{transform:'translate(0,0)'},
    '100%':{transform:'translate(100px,100px)'}
});

以上的代码,等效于在css中书写了以下的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@-webkit-keyframes move{
    0% {-webkit-transform:translate(0,0)}
    100% {-webkit-transform:translate(100px,100px)}
}
@-moz-keyframes move{
    0% {-moz-transform:translate(0,0)}
    100% {-moz-transform:translate(100px,100px)}
}
@-o-keyframes move{
    0% {-o-transform:translate(0,0)}
    100% {-o-transform:translate(100px,100px)}
}
@keyframes move{
    0% {transform:translate(0,0)}
    100% {transform:translate(100px,100px)}
}
 
/* 注:无需@-ms-keyframes,因为当ie10支持@keyframes时,常见的也包括tranform都无需加-ms-前缀。 */

另外使用JS2CSSKeyframes也可以很方便的修改页面上的@keyframes规则,无论是通过css定义的,或者通过JS2CSSKeyframes创建的动画规则:

1
2
var keyframe=JS2CSSKeyframes.get('move');
keyframe.add('50%',{transform:'translate(-50px,-50px)}'});

上面的代码即为 move 这个动画规则加入50%这一帧规则。

css3-animation.js轻量级的大容量css3动画

上面我提到了animate.css这个css3动画库,是用css写的,我将其部分规则提取,并用JS2CSSKeyframes重写了一遍,总共包含了三十多种css3动画,但是文件大小却只有6KB大小。

具体该文件里定义的动画规则可以参见这个demo: http://u.boy.im/css3keyframes

更多的有关JS2CSSKeyframes的详细用法可以参见JS2CSSKeyframes@Github: https://github.com/qiqiboy/JS2CSSKeyframes

本文已经有 4 条评论,继续盖楼啦!

发表评论 取消回复