译自：CSS transitions 101
中文：CSS3变换入门
原作者：Jason Cranford Teague
译者：神飞
请尊重版权，转载请注明出处，多谢！

尽管人们期望在屏幕上有些改变，但是CSS和HTML对页面中的交互能做的实在太少了，而那些还需要用代码来实现。

比如一个链接要么是这个颜色，要么是那个颜色；一个文本区域要么这么大，要么那么大；一张图片要么是透明的要么是不透明的；它们是从一个状态直接变到另一个状态——中间并没有过渡。

这导致大部分网页有些生硬，因为元素只会很死板的切换或改变。

是的，你可以使用DHTML、jQuery或者自己编写JS来实现过度，但是这需要更多的代码来实现本应该非常简单的功能。

我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中，你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息。

几个月之前，我就建议设计师应该开始使用新的CSS 3 技术来实现一些它们渴求已久的基本的功能了——唯一的问题就是，这些技术没有一个能在IE中可用，包括IE8。

一些读者认为的那些技术将会有75%的用户看不到的观点是不靠谱的。

对那些读者我想说，“坐稳了”，因为我将要向你介绍另一个新的CSS属性，它允许你通过简单的几行代码来为任意元素添加很酷的变换效果。

CSS 变换刚刚在CSS 3中被引入，但是已经被添加为webkit的扩展了。也就是说，现在它们只能用于基于webkit内核的浏览器，包括Apple Safari和Google Chrome。不过从Opera 10.5 pre-Alpha版本来看，Opera将在下一个10.5中支持CSS 3变换。所以要看到本文中提到的实际效果，强烈建议你使用Chrome或者Safari 4来查看本文。

变换曾经只是Webkit的一部分，而且是Safari UI能做而其它浏览器不能实现的一些很酷的东东的基础。

但是W3C CSS工作组曾经拒绝将变换添加到它的官方特性里面，一些成员坚持认为变换并非CSS属性而通过脚本来处理会更好。(内牛满面啊，我前一段也有类似的观点，也和高温讨论过，我认为CSS动画超出了表现的范围，交互的东西应该有脚本来实现，不过后来在鬼哥的点拨下，才开始有了新的认识——神飞)

但是很多设计师和开发人员，包括我自己，坚持认为这确实是样式——只是动态样式，而不是我们日常使用的传统的静态样式。

幸运的是，关于动态样式的争论已经成为过去。去年三月份，来自Apple和Mozilla的代表们开始将CSS变换模块添加到CSS 3特性里面，非常接近Apple已经添加到webkit中的表现。

在我们继续之前，让我强调一点：永远不要让网站的功能依赖样式，如果该样式不是浏览器通用的话(也就是说，所有的常用浏览器都支持)。

对错过的同学再一次强调：永远不要让网站的功能依赖样式，如果该样式不是浏览器通用的话。

这也就是说，你可以使用样式，比如变换，作为设计增强以提高用户体验——在不牺牲看不到它们的用户的可用性的前提下。如果你不用CSS变换照样能用而且用户依然能够完成他们的任务，就没问题，你就可以使用CSS变换。

出处：前端观察
责任编辑：bluehearts

上一页 下一页 CSS3变换入门 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。