HTML5+CSS3使用Transitions功能同时平滑过渡多个属性值

HTML5+CSS3 使用Transitions功能同时平滑过渡多个属性值使用 Transitions 功能，可以对多个属性值进行平滑过渡，同时也可以改变标签 的位置属性值、实现变形处理的 transform 属性值，来实现标签的移动、旋转和变形 等功能。示例：18-2 Transitions1.htmlTransitions 功能应用/titlediv width:250px;height:40px;margin-top:5px;margin-left:5px;border-radius: 5px;border:dashed 1px red;padding:12px;font-size:16px;color:#000000;display:inline-block;-moz-transform-origin:left bottom;-o-transform-origin:left bottom; -webkit-transform-origin:left bottom;div.divl background-color:#CCC;-webkit-transition: background-color 3s linear,-webkit-transform 3s linear;-moz-transition: background-color 3s linear,-moz-transform 3s linear;-o-transition: background-color 3s linear,-o-transform 3s linear;div.div1:hover background-color:#FFCCOO;-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);鼠标指向时，图像旋转在上述代码中，设置div层的基准点在左下角，宽度为250像素，高度为40像 素。当鼠标指向 divl 层时，使用 transition 属性设置 divl 层在 3 秒中过渡背景颜色为#FFCC00并旋转45度。握示使用Transitions功能实现动画的缺点是，只 能指定属性的开始值与终点值，然后在这两 个属性值之间实现平滑过渡，不能实现更为 复杂的动画效果。