CSS3动画能实现哪些效果?

说到CSS3动画，那个奶牛摔倒的401错误页面真是让人眼前一亮！CSS3现在已经能做很多让人惊叹的效果了，不仅仅是简单的转场或者移动，它已经可以创造出接近真实物理世界的动作效果。比如那个摔跤的奶牛，不仅实现了抛物线运动，还加入了翻转、变形等物理效果，这在几年前可能需要JavaScript才能实现，而现在纯CSS3就能搞得定。

CSS3动画的物理效果呈现

现在的CSS3动画已经能够利用transform、transition和animation这几个属性的组合，模拟出逼真的物理运动。比如实现自由落体效果就会用到cubic-bezier()贝塞尔曲线来调整运动速率，让物体的下落更接近真实的加速度；碰撞效果则可以通过translate和rotate的巧妙配合来表现。在GitHub上有个开源项目Animate.css，收录了超过70种CSS3动画效果，浏览量超过3百万，足见开发者们对CSS3动画的热情。

超越视觉的交互体验

你可能不知道，CSS3动画不只是好看，它还能创造惊人的交互体验。上周我在一个网站上看到了用CSS3实现的3D翻牌效果，完全不用JavaScript！只需要perspective和rotateY这两个属性的组合就能做到。更厉害的是鼠标悬停时的动态效果，通过:hover伪类和transition的配合，能让元素自然地响应交互。据CanIUse.com的数据显示，这些特性在现代浏览器中的支持率已经超过95%，基本可以放心使用了。

性能优化的秘密武器

相比JavaScript动画，CSS3动画在性能上有着天生的优势。浏览器对CSS3动画有硬件加速支持，能直接利用GPU来渲染，这样就不会卡顿。我以前做过测试，同样实现一个元素移动的动画，CSS3版本比JS版本的帧率高出20-30%！特别是在移动设备上，这个差距更明显。不过要注意的是，box-shadow和border-radius这些属性比较耗性能，在做动画时要慎用。

看着这些酷炫的效果，你可能会想：CSS3动画的极限在哪里？说实话，创意和技术总是在互相推动着前进。也许明年我们就能看到用纯CSS实现的更复杂的人物动画，或者更逼真的物理引擎效果。CSS3动画这片天地，远比我们想象的要广阔得多。