css3 - 动画功能 — Transitions功能

在css3中，如果使用动画功能，可以使页面上的文字或画像具有动画效果，可以使背景色从一种颜色平滑过度到另一种颜色。

css3中的动画功能分为Transition功能与Animations功能，这两种功能都可以通过改变css中的属性值来产生动画效果。

目前为止，Transitions功能支持从一个属性值平滑过度到另一个属性值，Animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果。

Transitions功能

浏览器	Firefox 4+	Opera 10	Safari 3.1+	Chrome 8+
各浏览器写法	-moz-transition	-o-transition	-webkit-transition	-webkit-transition

transition: property duration timing-function;

解析：

property表示对哪个属性进行平滑过渡；

duration表示在多长时间内完成属性的平滑过渡；

timing-function表示通过什么方法来进行平滑过渡；

html:

<div>示例文字</div>

1.平滑过渡一个属性值的css：

在线演示（鼠标经过，背景颜色改变）



鼠标悬停颜色渐变：

<style>
div {
background-color: pink;

-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
}
div:hover {
background-color: blue;  /*鼠标经过背景颜色改变*/
}
</style>

2.平滑过渡多个属性值的css

在线演示（鼠标经过，背景颜色、字体颜色、宽度改变）



鼠标悬停：



css：

<style>
div {
background-color: pink;

-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: blue; /*鼠标经过背景颜色改变*/
color: #fff;  /*鼠标经过字体颜色改变*/
width: 400px;  /*鼠标经过宽度改变*/
}
</style>

3.综合使用transitions动画功能

在线演示





鼠标经过图片，先向右移动30px，然后旋转180度；

html：

<div><img src="images/03.jpg" alt="*"></div>

css：

img {
position: absolute;
top: 70px;
left: 0;

-webkit-transform: rotate(0deg);
-webkit-transitions: left 1s linear, -webkit-transform 1s linear;
-moz-transform: rotate(0deg);
-moz-transitions: left 1s linear, -moz-transform 1s linear;
-o-transform: rotate(0deg);
-o-transitions: left 1s linear, -o-transform 1s linear;
}
div:hover img{
position: absolute;
left: 30px;

-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
}

解析：

使用Transitions功能实现动画的缺点是只能指定属性的开始值与终点值，然后在这两个属性之间实现平滑过渡，不能实现更为复杂的动画效果；

但使用Animation功能实现动画效果，它允许通过关键帧的指定来在页面上产生复杂的动画效果。