CSS3动画效果入门

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

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

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

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

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

几个月之前，我就来实现一些它们渴求已久的基本的功能了——唯一的问题就是，这些技术没有一个能在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来查看本文。

CSS变换从哪里来？

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

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

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

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

关于设计增强的一个简要介绍

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

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

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

首先，一些变换的想法

CSS变换将不会替代所有的DHTML，不过它会提供一些支持过渡的方法来提高您在浏览器中的设计。

你需要到下载 或浏览器来查看这些变换效果。这两个浏览器都支持Mac和PC系统。

滚动效果

变换最常见的用法就是当用户的鼠标悬放到元素上的时候将元素高亮(无论是链接、表格、表单还是其它的什么元素)，变换是为页面添加平滑的界面的非常棒的方法。

例一