[CSS3]制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性，而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效，请大家使用如Safari和Chrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~)
 

您还可以参考以下CSS3相关文章:
《5个CSS3技术实现设计增强》
《一起感受HTML5和CSS3的能量》
《提升你设计水平的CSS3新技术》

1.CSS3实现钟表效果(基于jQuery)

　　使用CSS3的基本变形特性:rotate，并结合了jQuery这类javaScript框架制作的CSS3时钟效果。

2.模拟时钟

　　模拟时钟基于过渡webkit和CSS3变形，javascript用于将其按当前时间转动。

3.可使用箭头键旋转的3D立方体

　　你可以使用上、下、左、右方向键控制这个3D立方体，它是基于webkit-perspective, -webkit-transform 和 -webkit-transition 创建。

4.多种3D立方体(淡入淡出)

　　多种3D立方体使用CSS3和它的属性‘transform’ 和 ‘transition’ ，我个人觉得效果很震撼，你能看到写在3D立方体上的透视感极强的文字。

5.CSS3手风琴效果

　　使用CSS3实现的手风琴菜单效果，基于webkit浏览器专有属性。

6.自动滚动视差效果

　　自动滚动视差效果使用WebKit的 CSS transition 属性。该效果无需JavaScript。

7.Isocube

　　Isocube有些类似于3D立方体，但也有不同之处，它可以让他片贴在立方体面。