CSS动画讲解

CSS3 2D 转换
Internet Explorer 10, Firefox, 和 Opera支持transform 属性.
Chrome 和 Safari 要求前缀 -webkit- 版本.
注意： Internet Explorer 9 要求前缀 -ms- 版本.
语法：

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

属性    内容
translate()    根据左（X轴）和顶部（Y轴）位置给定的参数，从当前位置移动。
rotate()    在一个给定度数顺时针旋转的元素，负值是允许的，这样的元素逆时针旋转。（如rotate值（30deg）元素顺时针旋转30度。）
scale()    该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。如（scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。）
skew()    语法：transfoorm:skew(<angle> [,<angle>]);包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。skewX(<angle>);表示只在X轴(水平方向)倾斜。skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
matrix()    该方法有6个参数，包含 旋转，缩放，移动（平移）和倾斜功能。
CSS3 3D 转换
转换属性
属性    描述
transform    元素应用2D或3D转换
transform-origin    允许你改变被转换元素的位置
transform-style    规定被嵌套元素如何在 3D 空间中显示
perspective    规定 3D 元素的透视效果
perspective-origin    规定 3D 元素的底部位置
backface-visiblity    定义元素在不面对屏幕时是否可见
3D 转换方法
函数    描述
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 转换元素的透视视图。
CSS3 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。
注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。
例：
div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

过渡属性

属性    描述
transition    简写属性，用于在一个属性中设置四个过渡属性。
transition-property    规定应用过渡的 CSS 属性的名称。
transition-duration    定义过渡效果花费的时间。默认是 0。
ransition-timing-function    规定过渡效果的时间曲线。默认是 “ease”。
transition-delay    规定过渡效果何时开始。默认是 0。
CSS3 动画
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

可以使用百分比来规定变化发生的时间

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

CSS3 动画属性

属性    描述
@keyframes    规定动画。
animation    所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name    规定 @keyframes 动画的名称。
animation-duration    规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function    规定动画的速度曲线。默认是 “ease”。
animation-fill-mode    规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay    规定动画何时开始。默认是 0。
animation-iteration-count    规定动画被播放的次数。默认是 1。
animation-direction    规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state    规定动画是否正在运行或暂停。默认是 “running”。