css3动画效果transform transition

Transform

•定义和用法
•transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
•rotate(angle )定义 2D 旋转，在参数中规定角度
•rotateX(angle)定义沿着 X 轴的 3D 旋转。
•rotateY(angle)定义沿着 Y 轴的 3D 旋转。
•rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
•scale(x,y)定义 2D 缩放转换。
•scale3d(x,y,z)定义 3D 缩放转换。
•scaleX(x)通过设置 X 轴的值来定义缩放转换。
•scaleY(y)通过设置 Y 轴的值来定义缩放转换。
•scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。

•浏览器支持
•Internet Explorer 10、Firefox、Opera 支持 transform 属性。
•Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
•Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
•Opera 只支持 2D 转换。

Transition

•定义和用法
•transition 属性是一个简写属性，用于设置四个过渡属性：
•transition-property
•transition-duration
•transition-timing-function
•transition-delay
•语法
•transition: property duration timing-function delay;
•值描述
•transition-property规定设置过渡效果的 CSS 属性的名称。
•transition-duration规定完成过渡效果需要多少秒或毫秒。
•transition-timing-function规定速度效果的速度曲线。
•transition-delay定义过渡效果何时开始(延时执行时间)。

•浏览器支持
•Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
•Safari 支持替代的 -webkit-transition 属性。
•注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。