CSS教程:CSS变换(transition)

一个简单的变换

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

CSS property

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

Duration

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

Timing function

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

Delay

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

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

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

1
2
3
4
5

a:hover {
   color: red;
   -webkit-transition: color .25s linear;
   transition: color .25s linear;
}

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

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

1
2
3
4
5

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

添加多重变换

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

1
2
3
4
5
6
7
8

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;
}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!