你需要知道的CSS3 动画技术

猫性男孩

译自： 你需要知道的CSS3 动画技术
译自： What You Need To Know About Behavioral CSS
转自：http://www.qianduan.net/what-you ... behavioral-css.html

---

译序： 本文译自Smashingmagazine，但是原文讲述的内容有些浅，也不是很完整，前端观察 在翻译的前提下，增加了更多的更系统的内容。如有不足之处，欢迎指正补充。

随着网络的发展，浏览器具有更强的渲染更高级代码的能力，我们正逐步实现跨越所有平台和浏览器的目标。我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常，而且形成了鼓励创新、避免hack、重前端脚本的氛围。

网络是一个非常好的环境，也是一个有丰富的知识来分享的协作社区。我们想要有圆角 ，我们就实现了它；我们想要多背景图片 ，我们实现了它；我们想要边框图片 ，我们也让它实现了。所以需求从来不是问题，否则，我们可能还都仍然在使用table来布局页面而且使用过多的代码呢。我们都知道，网络无所不能。

为网络而生

CSS 3的属性比如border-radius 、box-shadow 和 text-shadow 在 webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为 用户创建更轻量的页面和更丰富的体验，而且它们可以优雅的降级。然而，这些只是CSS 3能为我们做的众多事情中的一小部分。

在本文中，我们将走的更远，看一看 变形(transformation)、转换(transition)和动画(animation) 等更高级的CSS3技术。我们将涉及代码本身、浏览器支持以及一些可以正确地展示这些新属性是如何即提升你的设计又增强整体用户体验的例子。

CSS 变形(Transformation)

CSS transformation是W3C的一个草案。但当我第一次坐下来阅读它的全部特性 以了解一些东西的时候，它并没有让我感到开窍。你可以想象的到，这个文档是用技术术语的撰写的，而且它更关注变形的图形(比如绘图)元素和矩阵。大一学习微积分之后就没有碰过矩阵了，我必须为本章节做很多好的旧浏览器测试以及猜测和检验。

在看完我能找到的每一个教程和大量的浏览器测试之后，我总结出一些大家都能从中获益的有用的关于CSS变形的信息。

transform

transform属性实现了一些可用SVG 实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素——只需要一行CSS代码。

一些前卫设计的最大诟病就是文字不可选(必须要使用切图的方法实现)。当你熟练使用transform属性来控制文字的时候，这就不再是问题了，因为这是个纯CSS方法，所以元素内的文字会保持可选。这是CSS相对于使用图片(或背景图片)的一个巨大优势。

一些有趣而有用的变形功能：

• rotate
  Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
• scale
  Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
• translate
  Translate就是基于X和Y 坐标重新定位元素
• skew
  顾名思义，skew就是要将对象倾斜，参数是度数
• matrix
  transform支持矩阵变换，就是基于X和Y 坐标重新定位元素
  

让我们更深入的了解每一个功能吧。

Rotate

transform属性有很多用法，其中一个就是translate(旋转) 。translate就是基于角度转动一个对象并可用于内联元素和块级元素，它可以实现很酷的效果 。

源码打印？

• #nav{  
•     -webkit-transform: rotate(-90deg);  
•     -moz-transform: rotate(-90deg);  
•     -o-transform: rotate(-90deg);  
•     filter: progidXImageTransform.Microsoft.BasicImage(rotation=3);  
•     }  
  

请注意在IE8中(非标准模式)它需要你写成“-ms-filter”而不是“filter”。

浏览器支持

浏览器对translate的支持令人惊奇的广泛。在上面的CSS片段中，我们直接加上-webkit-和-moz-前缀然后将#nav元素旋转-90度。

相当简单吧？唯一的问题是对于一个相当重要的设计元素，如果IE不支持，很多设计师就会不情愿使用它。

幸运的是，IE有这方面的滤镜 :图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3。你将不会获得和Webkit和Gecko一样的精密控制，但是至少在一定程度上保持统一(甚至IE6)。虽然这个滤镜只支持4个值，显得有些鸡肋，但是对于IE来说，聊胜于无吧。

另外，非常值得一提的是，Opera在前几天发布了Opera 10.50 pre版本，声称支持CSS3 的transition和transform。只是还是需要使用私有属性，也就是要使用前缀 -o-

赵人无名

[size=13.63636302947998px]这是什么

猫性男孩

赵人无名 发表于 2013-4-22 09:25
这是什么

呃。。。应该是错误链接吧