过渡

transition 属性

示例

参考：

• 动效落地方法
• 优秀的 CSS 交互动效示例

支持：
nternet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本，不支持 transition 属性。
Chrome 25 以及更早的版本，需要前缀 -webkit-。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

图形变换

参考：

• css3中的变形 transform详解

transform 属性

支持：
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。

2D转换

方法：

• translate(left, top) 相对当前位置移动
• rotate(30deg) 顺时针旋转，可为负值
• scale(x, y) 尺寸扩大倍数
• skew(30deg, 20deg) 绕X轴、Y轴翻转
• matrix() 把所有 2D 转换方法组合在一起。需要六个参数，包含数学函数，进行旋转、缩放、移动以及倾斜元素。示例

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。

3D转换

方法：

• rotateX(120deg) 绕X轴旋转
• rotateY(120deg) 绕Y轴旋转

其他方法：

函数	描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

动画

animation 属性与 keyframe 规则

示例

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

在一个动画中添加多个 改变多个样式的 keyframe 选择器：
示例

@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}