您的位置：首页 > Web前端 > CSS

CSS3动画之一：Transitions功能

2011-09-30 23:51 363 查看

　　在页面里加入些动画，可以是页面更加生动活泼，使用CSS3的动画功能，可以使页面上的文字或图像具有动画功能。比如说背景色从一种颜色，平滑的过度到另一种颜色。CSS3中的动画功能有两种，Transitions和Animations。这两种功能都可以通过改变CSS中的属性值来产生动画效果。本文简单介绍一下Transitions功能的使用方法。

　　到目前为止，支持CSS3中的Transitions功能的浏览器有：Firefox 4+ 、Opera 10+、Safari 3.1+、Chrome 8+等，transitions属性的使用方法如下：

　　transition: property duration timing-function

　　但是，在书写CSS代码的时候，如果是Firefox浏览器，需要书写成“-moz-transition”的形式；如果是Opera浏览器，需要书写成“-o-transition”的形式；如果是Safari或者Chrome浏览器，则写成“-webkit-transition”的形式。

　　前面说了，Transitions和Animations都是通过改变CSS中属性的值来产生动画效果的，所以，property表示需要改变的属性， duration表示在多长时间内完成动画，也就是动画执行的时间，timing-function表示通过神马方法进行动画。

　　下面看一个例子来演示一下Transitions功能的动画效果，页面中一个div元素，背景色为黄色，用过hover属性指定当鼠标指针停留在div元素上时背景色变为浅蓝色，通过transition属性指定：当鼠标指针移动到div元素上时，在1s钟内div元素的背景色从黄色平滑过渡到浅蓝色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transitions功能用法</title>
<style>
div {
background-color: #ff0;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
}
div:hover {
background-color: #0ff;
}
</style>
</head>
<body>
<div>鼠标放上来，看我的背景色</div>
</body>
</html>

　　可以看到，当鼠标移到div元素上时，背景色从黄色变绿色然后边浅蓝色，这样的平滑过渡效果，在CSS2中一般可以用jQuery去实现。如今采用CSS3的Transitions功能就方便多了。

　　还有一种用法，就是把transition的三个属性分开写，写成: transition-proterty属性, transition-duration属性, transition-timing-function属性。这三个属性的指定方法与含义与transition属性中的三个参数的含义及指定方法完全相同，是一样的。代码如下

transition-property: background-color;
transition-duration: 1s;
transition-timing-function: linear;

　　当然，针对不同的浏览器，前面要加上相应的前缀。在这儿就不一一写出了。

刚才这个例子只是改变了一个属性值，那么Transitions功能可不可以同时改变多个属性值呢？当然可以，why not？下面把刚才的例子稍微修改一下：一个div元素，背景色为黄色，字体颜色为黑色，宽度为400px，通过hover属性指定当鼠标指针停留在div元素上时背景色变为浅蓝色，字体为白色，宽度增加到500px。通过transition属性指定当鼠标指针移到到div元素上时在1s钟的时间内完成这几个属性值的变化即平滑过渡。

代码清单：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transitions功能用法</title>
<style>
div {
background-color: #ff0;
color: #000;
width: 400px;
-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
-o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}
div:hover {
background-color: #0ff;
color: #fff;
width: 500px;
}
</style>
</head>
<body>
<div>鼠标放上来，看我的背景色,文字颜色和宽度</div>
</body>
</html>

　　和预计的一样，背景色平滑过渡的时候，文字颜色也在平滑过渡，而宽度也渐渐的从400px变为500px。比起以前直接hover是不是炫多了？

使用Transitions功能实现动画的缺点是只能指定属性的开始值与终点值，然后再这两个属性值之间实现平滑过渡，不能实现更为复杂的动画效果，在CSS3中，除了Transitions功能外，还可以使用Animations功能实现动画效果，它允许通过关键帧的指定在页面上实现更为复杂的动画效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航