css3中的动画功能分为transition功能与animations功能，这两种功能都可以通过改变css中的属性值来产生动画效果。
目前为止，transitions功能支持从一个属性值平滑过度到另一个属性值，animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果。
transitions功能浏览器firefox 4+opera 10safari 3.1+chrome 8+
各浏览器写法 -moz-transition -o-transition -webkit-transition -webkit-transition
transition:property duration timing-function;property表示对哪个属性进行平滑过渡； duration表示在多长时间内完成属性的平滑过渡； timing-function表示通过什么方法来进行平滑过渡；
html:
<p>示例文字</p>
平滑过渡一个属性值的css：在线演示（鼠标经过，背景颜色改变）
<style> p { background-color: pink; -webkit-transition: background-color 1s linear; -moz-transition: background-color 1s linear; -o-transition: background-color 1s linear; } p:hover { background-color: blue; /*鼠标经过背景颜色改变*/ }</style>
平滑过渡多个属性值的css：在线演示（鼠标经过，背景颜色、字体颜色、宽度改变）
<style> p { 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; } p:hover { background-color: blue; /*鼠标经过背景颜色改变*/ color: #fff; /*鼠标经过字体颜色改变*/ width: 400px; /*鼠标经过宽度改变*/ }</style>
在线演示 （综合使用transitions动画功能） ：鼠标经过图片，先向右移动30px，然后旋转180度；
html：
<p><img src="images/03.jpg" alt="*"></p>
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; } p:hover img{ position: absolute; left: 30px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); }
解析：
使用transitions功能实现动画的缺点是只能指定属性的开始值与终点值，然后在这两个属性之间实现平滑过渡，不能实现更为复杂的动画效果；
但使用animation功能实现动画效果，它允许通过关键帧的指定来在页面上产生复杂的动画效果。
在css3中，如果使用动画功能，可以使页面上的文字或画像具有动画效果，可以使背景色从一种颜色平滑过度到另一种颜色。
css3中的动画功能分为transition功能与animations功能，这两种功能都可以通过改变css中的属性值来产生动画效果。
目前为止，transitions功能支持从一个属性值平滑过度到另一个属性值，animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果。
transitions功能浏览器firefox 4+opera 10safari 3.1+chrome 8+
各浏览器写法 -moz-transition -o-transition -webkit-transition -webkit-transition
transition:property duration timing-function;property表示对哪个属性进行平滑过渡； duration表示在多长时间内完成属性的平滑过渡； timing-function表示通过什么方法来进行平滑过渡；
html:
<p>示例文字</p>
平滑过渡一个属性值的css：在线演示（鼠标经过，背景颜色改变）
<style> p { background-color: pink; -webkit-transition: background-color 1s linear; -moz-transition: background-color 1s linear; -o-transition: background-color 1s linear; } p:hover { background-color: blue; /*鼠标经过背景颜色改变*/ }</style>
平滑过渡多个属性值的css：在线演示（鼠标经过，背景颜色、字体颜色、宽度改变）
<style> p { 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; } p:hover { background-color: blue; /*鼠标经过背景颜色改变*/ color: #fff; /*鼠标经过字体颜色改变*/ width: 400px; /*鼠标经过宽度改变*/ }</style>
在线演示 （综合使用transitions动画功能） ：鼠标经过图片，先向右移动30px，然后旋转180度；
html：
<p><img src="images/03.jpg" alt="*"></p>
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; } p:hover img{ position: absolute; left: 30px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); }
解析：
使用transitions功能实现动画的缺点是只能指定属性的开始值与终点值，然后在这两个属性之间实现平滑过渡，不能实现更为复杂的动画效果；
但使用animation功能实现动画效果，它允许通过关键帧的指定来在页面上产生复杂的动画效果。
以上就是css3动画功能之transitions功能的介绍的详细内容。