熟悉前端开发的朋友，肯定经历过烦心的CSS属性浏览器兼容性调整过程，为了使得CSS属性支持所有的浏览器，例如， chrome，firefox，IE，opera，Safari等等，你不得不处理添加一大推的冗余CSS代码（带有浏览器特定前缀的CSS相关代码）。特别是CSS3中的相关属性，尤其需要处理。

下面是一个动画效果例子相关代码：

1. @keyframes myanim {

2.   0%   { opacity: 0; }

3.  100% { opacity: 1; }

4.}

5. 

6.#box{

7.  animation: myanim 5s infinite; /* IE 10+, Fx 29+ */

8.}

以上代码对于支持CSS3动画属性keyframe非常来的浏览器来说，没有任何问题，但是对于一些浏览器，比如，chrome，可能你看不到任何动画效果，我们不得不添加并修改成如下代码：

1.@-webkit-keyframes myanim {

2.  0%   { opacity: 0; }

3.  100% { opacity: 1; }

4.}

5.@-moz-keyframes myanim {

6.  0%   { opacity: 0; }

7.  100% { opacity: 1; }

8.}

9.@-o-keyframes myanim {

10.  0%   { opacity: 0; }

11.  100% { opacity: 1; }

12.}

13.

14.@keyframes myanim {

15.  0%   { opacity: 0; }

16.  100% { opacity: 1; }

17.}

18. 

19.#box{

20.  -webkit-animation: myanim 5s infinite; /* Safari 4+ */

21.  -moz-animation:    myanim 5s infinite; /* Fx 5+ */

22.  -o-animation:      myanim 5s infinite; /* Opera 12+ */

23.  animation: myanim 5s infinite; /* IE 10+, Fx 29+ */

24.}

具体代码运行效果及其相关代码请参考课程： http://www.gbtags.com/gb/gbtutorials/566.htm

为了简化开发过程和相关的代码冗余问题，我们引入了prefixfree这个类库，这个类库，可以自动帮助你添加相关的浏览器特有前缀属性，我们不再需要在css代码中自己手动加入相关的属性，使用也非常的方便，只需要引入prefixfree这个类库即可，如下：

1.<script src="http://cdn.gbtags.com/prefixfree/1.0.7/prefixfree.min.js"></script>