前言

前段时间写一个demo的时候，里面有很多的效果都是用CSS3的一些高级属性写的，并没有用到JS。从实用的角度来看，这是很合理的，没有必要非要用JS去写一些特效和动画，但是正是因为JS才算的是一门真正的计算机语言，而且又有很多坑和难以驾驭的地方，所以我们会更多的重点关注JS，而忽略CSS。正是因为如此，才导致很久没有关注CSS3，以至于其中很多一些高级的属性都忘记了。例如，在这个demo中会用到CSS的transform属性，所以想专门写一个关于transform的总结。结果在找资料的过程中，找到了w3cplus中一个关于CSS3高级属性的系列文章。发现里面对transform / transition / animation 以及很多其他的高级属性都做了详细的总结和论述，看完之后实在不知道自己该写什么了。所以就打算把这个系列文章整合到自己的这篇博客中来。

后来在我的书签中找到了一个关于CSS动画和过渡的效果预览网站，里面有很多内容可以实现在线预览，然后通过这个网站有找到了很多关于CSS方面动画和过渡等的效果的比较好的网站和库，比如Animation.css。所以，这里就把这些资源做一个总结，来把这些零散的CSS知识统一整合到这篇文章中，后期关于CSS的整合文章应该会有，也都是类似的整合贴，会把一些CSS的主要的大块的知识体系搭建起来，这样的话，便于更加熟悉CSS。

其实掌握CSS的关键就是一个熟练的过程，或者说借助工具可以实现常见的效果，而不是怎么去自己总结，因为CSS中的内容相对来说比较死一些，没有JS那么灵活多变。所以把这些总结性的文章在整合在一起，如果自己以后遇到类似的效果直接来这里能快速的找到自己想要的效果，在这个过程中建立起对CSS的熟悉感，这样基本就算是掌握了。

w3cplus中CSS3高级属性的系列文章

第一节：《CSS3 Gradient》

第二节：《CSS3 RGBA》

第三节：《CSS3 Border-radius》

第四节：《CSS3 Text-shadow》

第五节：《CSS3 Box-shadow》

第六节：《CSS3 Transform》

第七节：《CSS3 Transition》

第八节：《CSS3 Animation》

以上系列文章来自于w3cplus

CSS3 Animation

在跟着Y老师学习的过程中，获得了一个比较好的在线预览很多CSS3效果属性的网站：

http://www.f2e.name/case/css3/tools.html

这个网站有三个方面的作用：

第一可以通过调节滑块来实现很多样式，最终找到你想要的样式。

第二，这个网站中左侧有三个tag，最下面的tag是“动画库”，里面会有很多已经成熟的特效效果，可以直接拿来用的。当然这个网站的很多效果其实也是来自于Animation.css这个库的，链接如下

Animation

这个库有专门的github说明，里面有具体的使用方法，其实非常简单，基本上和bootstrap一样，只要在具体的html元素中给class就可以了。

第三，这个网站最上面的导航栏中有一个“案例分享”的导航，打开链接之后会有很多CSS动画特效的展示demo，当然感觉这个网站更新和维护可能会差一些，已经有很多示例的demo链接已经失效了，但是还是会有一些比较不错的示例demo可以参考。通过示例参考的很多网站又可以找到更多关于CSS特效的其他网站。所以说通过这个网站可以找到很多的类似的资源。

后话

其实CSS3也可以实现很多的特效，一些简单的效果其实没有必要非得用JS来实现，我们之所以要用JS来实现，只是因为想通过这些代码的书写来提高自己对JS这门语言的掌握而已。最后，贴一个前段时间很火的CSS实现灭绝动物效果的动画网站作为CSS动画的结束。

http://species-in-pieces.com/

当然我上面贴出的这个是官网，因为是国外的网站，所以打开会比较慢，如果你实在没有耐心的话，国内有翻版，只是将网站上的英文都翻译成了中文，效果没有任何差别：

http://www.webhek.com/misc/species-in-pieces