本文深入解析CSS3动画中的transition(过渡), transform(变换)和animation(动画)属性，从它们的作用、具体用法到实际案例演示，帮助开发者掌握如何通过CSS实现平滑的动画效果，包括背景色过渡、变换属性应用以及动画制作的基本步骤。
CSS3动画相关的几个属性是：transition, transform, animation；我分别理解为过渡，变换，动画。虽意义相近，但具体角色不一。
transition指过渡，就是从a点都b点，就像过江坐渡轮，是有时间的，是连续的，一般针对常规CSS属性；transform指变换，就那几个固定的属性：旋转啦，缩放啦，偏移啦什么的，独立于远房亲戚transition使用，但是，效果就是很干涩机械的旋转移动。要是配合transition属性，旋转啊什么的，就会很平滑。animation最先安家于Safari浏览器，自成一家，与transition和transform有老死不相往来之感，但是要说单挑的话，animation要比transition厉害些。
transition
其作用是：平滑的改变CSS的值。无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画。于是乎，只要一个整站通用的class，就可以很轻松的渐进增强地实现动画效果，超有实用价值的说。
transition有下面些具体属性：
transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
过渡类型的含义与flash中缓动类型（远不及flash丰富）是一致的
linear //线性过度 ease-in //由慢到快 ease-out //由快到慢 ease-in-out //由慢到快在到慢 cubic-bezier就是指贝塞尔曲线
transform
transform就是指的这个东西，拉伸，压缩，旋转，偏移。
transform属性要是加上transition的过渡特性，那可就是如虎添翼，樱木花道配上流川枫啊，可以产生不少美妙的火花，例如下面这个例子
animations
截止2010年11月份，animations这物似乎还是只在webkit核心的浏览器上起作用，所以本段落的一些demo效果，需在webkit核心浏览器下查看，不在重复赘述。
未完，待续
参考资料：
扫一扫
865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
