css3中的动画功能分为transitions功能和animations功能，这两种功能都可以通过改变css属性值来产生动画效果。今天带大家一起来看看css3动画功能中的transitions的用法。
transitions用法：
transition: property duration timing-function
其中property表示对哪个属性进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡其中包括：
linear[规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）]；
ease[规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）]；
ease-in[规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）]；
ease-out[规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）]；
ease-in-out[规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）]；
cubic-bezier(n,n,n)[ 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值]。
Transitions示例：
背景颜色变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3动画</title>
<style>
div{
background-color:#ffff00;
-webkit-transition:background-color 1s linear;
-moz-transition:background-color 1s linear;
-o-transition:background-color 1s linear;
}
div:hover{
background-color:#00ffff;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
效果代码：
<style>
#transition{
background-color:#ffff00;
-webkit-transition:background-color 1s linear;
-moz-transition:background-color 1s linear;
-o-transition:background-color 1s linear;
}
#transition:hover{
background-color:#00ffff;
}
</style>
<div id="transition">示例文字</div>
使用transitions功能时同时平滑过渡多个属性值：
<style>
#tmore{
background-color:#ffff00;
height:50px;
-webkit-transition:background-color 1s linear,color 1s linear,height 1s linear;
-moz-transition:background-color 1s linear,color 1s linear,height 1s linear;
-o-transition:background-color 1s linear,color 1s linear,height 1s linear;
}
#tmore:hover{
background-color:#00ffff;
height:100px;
}
</style>
<div id="tmore">示例文字</div>
在展示一个示例，将下面的文字换成图片效果会更好：
<style>
#imgtr{
position:absolute;
left:0;
background-color:#ffff00;
-webkit-transform:rotate(0deg);
-webkit-transition:left 1s linear,-webkit-transform 1s linear,height 1s linear;
-moz-transform:rotate(0deg);
-moz-transition:left 1s linear,-moz-transform 1s linear,height 1s linear;
-o-transform:rotate(0deg);
-o-transition:left 1s linear,-o-transform 1s linear,height 1s linear;
}
#imgtr:hover{
position:absolute;
left:30px;
-webkit-transform:rotate(720deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(720deg);
}
</style>
<div id="imgtr">示李文忠</div>
关于css3中的动画，今天就写这些，还有一个动画下次在说了，亲记得关注哦。