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

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

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

是的,你可以使用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来查看本文。

CSS变换从哪里来?

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

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

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

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

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

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

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

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

首先,一些变换的想法

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

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

变换、状态与动作

但是请稍等一下。在深入了解变换之前,我们需要理解一个元素能变换的不同的状态。

状态定义当前页面中相应的元素如何与用户进行交互,它们在CSS中通过伪类来定义,比如当用户的鼠标经过一个元素的时候,那个元素就会被hover伪类控制。

动态伪类 起作用的元素 描述
:link 只有链接 未访问的链接
:visited 只有链接 访问过的链接
:hover 所有元素 鼠标经过元素
:active 所有元素 鼠标点击元素
:focus 所有可被选中的元素 元素被选中
None 所有元素 所有元素的默认状态

变换通过改变不同元素状态之间的一个时间段内的样式来起作用。比如,一个元素的默认状态的颜色值将会在呈现hover状态的色彩值之前逐渐显示色盘中的中间颜色。

一个简单的变换

让我们假设一个简单的变换,在用户的鼠标经过一个链接的时候,将颜色从一个变换成另外一个。与其它CSS属性一样,变换也是直接添加到要使用它的选择器中。该属性可以采用下面的4个值。

CSS property

被变换的属性(比如, color)。看一下下面的表格了解所有可以被变换的CSS属性列表。

Duration

变换持续的时间,通常以秒来计算(比如, .25s).

Timing function

允许你控制持续的时间的计算方式。与其使用一个简单的线性计算,你可以使变换加速(渐入)或者减速(淡出),或者甚至specify a beat or count (比如,linear).

描述
linear 从开始到结束以相同的速度指定了一个过渡效果(相当于贝塞尔曲线(0,0,1,1))
ease 指定了一个缓慢的启动,由慢变快,然后缓慢结束的过渡效果(相当于贝塞尔曲线(0.25,0.1,0.25,1))
ease-in 指定了一个一个缓慢的启动过渡效果(相当于贝塞尔曲线(0.42,0,1,1))
ease-out 指定了一个一个缓慢结束的过渡效果(相当于贝塞尔曲线(0,0,0.58,1))
ease-in-out 指定了一个缓慢的开始和结束的过渡效果(相当于贝塞尔曲线(0.42,0.58,1,0))
cubic-bezier(n,n,n,n) 自定义贝塞尔曲线数值,可能的数值是0到1

Delay

在动作和变换开始之间等待多久,通常用秒来表示(比如, .1s)。如果你不想延迟,该值可省略。

因为变换属性始于Webkit扩展,我们不得不同时使用transition 和-webkit-transition 属性以向后兼容。

让我们首先提阿贾这这些属性到:hover 伪类中:

a:hover {
	color: red;
	-webkit-transition: color .25s linear;
	-moz-transition: color .25s linear; /* for Mozilla Firefox */
	-o-transition: color .25s linear; /* for Opera */
	-ms-transition: color .25s linear; /* for IE */
	transition: color .25s linear;
}

那么现在,当鼠标经过一个链接,不会直接从蓝色跳转到红色,而是用四分之一秒的时间逐渐变换它们的中间颜色(过渡颜色)。

CSS3 transition
CSS3 transition

当然,我们也希望变换回到默认的链接颜色,那么我们可以添加一个变换到:link (以及:visited)伪类上,并在它褪去之前添加一个简单的延迟(十分之一秒) :

a:link, a:visited {
	color: blue;
	-webkit-transition: color .25s linear .1s;
	transition: color .25s linear .1s;
}

添加多重变换

因为一个变换就是一个CSS属性,如果你在同一个CSS规则中添加多个变换的实例,那么最后的那个将会覆盖前面的,而不是添加它们。所以在下面的规则中,唯一的变换将是背景色彩:

a:hover {
	color: red;
	background-color: rgb(235,235,185);
	-webkit-transition: color .25s linear;
	transition: color .25s linear;
	-webkit-transition: background-color .15s linear .1;
	transition: background-color .15s linear .1;
}

当然,这并不是说,不能添加多重变换——多重变换可以在同一个变换属性定义中用逗号隔开:

a:hover {
	color: red;
	background-color: rgb(235,235,185);
	-webkit-transition: color .25s linear, background-color .15s linear .1s;
	transition: color .25s linear, background-color .15s linear .1s;
}

这条定义将产生色彩和背景色的双重变换。

什么可以被变换?

几乎所有的有色彩、大小或位置等组件的CSS属性,包括许多新添加的CSS 3属性, 都可以应用变换。一个值得注意的例外是box-shadow。

来自W3C的变换的说明,这里是一个可以赋予变换的CSS属性的列表,附带转变的对象,我也高亮了一些比较有用的属性。

CSS属性 改变的对象
background-color 色彩
background-image 只是渐变
background-position 百分比,长度
border-bottom-color 色彩
border-bottom-width 长度
border-color 色彩
border-left-color 色彩
border-left-width 长度
border-right-color 色彩
border-right-width 长度
border-spacing 长度
border-top-color 色彩
border-top-width 长度
border-width 长度
bottom 百分比,长度
color 色彩
crop 百分比
font-size 百分比,长度
font-weight 数字
grid-* 数量
height 百分比,长度
left 百分比,长度
letter-spacing 长度
line-height 百分比,长度,数字
margin-bottom 长度
margin-left 长度
margin-right 长度
margin-top 长度
max-height 百分比,长度
max-width 百分比,长度
min-height 百分比,长度
min-width 百分比,长度
opacity 数字
outline-color 色彩
outline-offset 整数
outline-width 长度
padding-bottom 长度
padding-left 长度
padding-right 长度
padding-top 长度
right 百分比,长度
text-indent 百分比,长度
text-shadow 阴影
top 百分比,长度
vertical-align 百分比,长度,关键词
visibility 可见性
width 百分比,长度
word-spacing 百分比,长度
z-index 正整数
zoom 数字

变换计时与延迟

使用变换,你可以改变变换的速率,在开始的时候较慢然后在结束的时候加速,反之亦然,或者之间的任何事情。CSS变换有5个计时的关键词,同时也允许你自己定义你自己的计时曲线。

名称 如何工作
cubic-bezier(x1, y1, x2, y2) X 和 Y 值在0到1之间,以定义用于Time function的贝塞尔曲线的形状。
linear 均速
ease 逐渐慢下来
ease-in 加速(渐入)
ease-out 减速(淡出)
ease-in-out 加速然后减速

全部变换?

变换将很快成为所有网站的标准操作方式,从而增强用户界面的体验。

为了给你的整个网站添加一个普遍的变换,一个做法就是添加一个变换到全体选择器,类似CSS reset。下面的代码会给页面中的所有元素添加一个默认的变换,从而允许你保持一个统一的变换效果:

*:link, *:visited, *:hover, *:active, *:focus {
	-webkit-transition: color .25s linear,
		background-color .25s linear,
		border-color .25s linear;
	transition: color .25s linear,
		background-color .25s linear,
		border-color .25s linear;
}

一个反对全部变换,同时明确反对使用全体选择器作为CSS reset的争论是,将一个样式用到页面的所有元素会减缓页面的渲染。然而,我并没有发现任何有关与此的证据。有人知道吗?
OK,其实CSS 变换就这么简单,它并不难理解,而且你也不用些大量的JS脚本来实现它,这很方便实用,多做几次练习,你就可以熟练的使用它了。

一个反对全部变换,同时明确反对使用全体选择器作为CSS reset的争论是,将一个样式用到页面的所有元素会减缓页面的渲染。然而,我并没有发现任何有关与此的证据。有人知道吗?

OK,其实CSS 变换就这么简单,它并不难理解,而且你也不用些大量的JS脚本来实现它,这很方便实用,多做几次练习,你就可以熟练的使用它了。

译自:CSS transitions 101
中文:CSS3变换入门
原作者:Jason Cranford Teague
译者:神飞

喜欢这篇文章吗,不妨分享给朋友们吧!