css3动画

推荐个人比较喜欢的css3动画参数讲解的网站，腾讯ISUX下的，包括动画手册和动画工具，很实用。

动画手册
http://isux.tencent.com/css3/index.html

动画工具 http://isux.tencent.com/css3/tools.html

transform变形

可直接写在原元素上，一显示就有效果

不用触发

transform属性能对元素对象进行变形操作，主要包括以下几种：旋转rotate、缩放scale、移动translate、倾斜skew以及矩阵变形matrix。

语法 transform: none | <transform-function>[<transform-function>]*

取值

none :表示不进行变换；  
<transform-function>:表示一个或多个变换函数，以空格分开，因此可以同时对一个元素进行transform的多种属性操作。

1. rotate(<angle>):旋转元素  
2. scale(<number>[, <number>]):缩放元素    
3. translate(<translation-value>[, <translation-value>]):移动元素  
4. skew(<angle> [,<angle>]):倾斜元素  
5. matrix(<number>,<number>,<number>,<number>,<number>,<number>):矩阵变形  
6. perspective(length):透视  

示例：transform:rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);

transform-origin
初始值：center center，效果等同于 50% 50%，默认为元素的中心点
受影响变形函数：rotate()

percentage：用百分比指定坐标值。可以为负值。
length：用长度值指定坐标值。可以为负值。
left center right是水平方向取值，而top center bottom是垂直方向的取值。

rotate()
单位：角度值deg，弧度值rad，梯度gard，转/圈turn
该函数能够旋转元素，它主要是在二维空间内进行操作，通过一个角度参数值，来设定旋转的幅度。
如果对元素本身或者元素设置了perspective值，那么rotate3d()函数可以实现一个3维空间内的旋转。

scale()
取值：正数，负数(负数是先翻转元素然后再缩放)
该函数能够缩放元素。

translate()
取值：长度值，可以是正数、负数
该函数能够移动元素。

skew()
单位：deg(角度值)
该函数能够让元素倾斜显示。

matrix()
matrix()是矩阵函数，以一个含六值的(a,c,e,b,d,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a c e b d f]变换矩阵。
注意：c,e的值用正弦或余弦值表示
IE虽然不支持大部分的CSS3变形，但是支持matrix滤镜。

matrix(<number>,<number>,<number>,<number>,<number>,<number>);
该函数包括6个参数(a,c,e,b,d,f)，实际上它是一个3*3的矩阵:
    a  c  e  
    b  d  f  
    0  0  1

参数详解：
a表示scaleX();
c表示skewY();
e表示skewX();
b表示scaleY();
d表示translateX();
f表示translateY();

perspective()
(暂时不是很懂应用)
perspective 变换函数对于 3D 变换来说至关重要。该函数会设置查看者的位置，并将可视内容映射到一个视锥上，继而投影到一个 2D 视平面上。
如果不指定透视，则 Z 空间中的所有点将平铺到同一个 2D 视平面中，并且变换结果中将不存透视深概念。
作用于元素的子元素

实例： http://isux.tencent.com/css3/html/demo/3d.html
写法：

设置所有的子元素有一个共同的透视值，perspective作为一个属性值来写
.wrap{-webkit-perspective:1000px;}
直接作用于元素本身，perspective作为transform的一个函数来
.wrap .child{-webkit-transform:perspective(1000px);}

参数表：

none  定义不进行转换。   
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。   
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。   
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。   
translateY(y) 定义转换，只是用 Y 轴的值。  
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。   
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。   
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。   
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。   
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。   
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。   
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。   
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。   
perspective(n) 为 3D 转换元素定义透视视图。

transition过渡

写在原元素上

从原本css到新css的改变过程

需要一个事件触发（click | hover等），才会随时间改变css

也可通过js增加css变

transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。

transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值。

语法：transition: property duration timing-function delay;

取值：

 property  设置过渡效果的css属性名称，所以可以是transform|animation|all等
duration  从旧属性换到新属性花费的时间，单位为秒s|毫秒ms
timing-function  速度效果的速度曲线,默认值ease
delay 过渡效果何时开始

timing-function

取值：  
ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。
linear：线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。
ease-in：渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数。
ease-out：渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数。
ease-in-out：渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数。
cubic-bezier：特殊的立方贝塞尔曲线效果。

delay
0：不延迟，直接执行。
正数：按照设置的时间延迟。
负数：设置时间前的动画将被截断。

animation动画

动画库参考 http://daneden.me/animate/

一般写在需要的时候，如：hover事件

不用触发

语法：animation: name duration timing-function delay iteration-count direction;

取值：

name 需要绑定到选择器的keyframe名称  
duration 完成动画所花费的时间，以秒m或毫秒ms计  
timing-function 动画的速度曲线   
delay 动画开始之前的延迟  
iteration-count 动画应该播放的次数  
direction 对象动画运动的方向 

默认值： none 0 ease 0 1 normal

name
动画名称，必须与规则@keyframes配合使用。

@keyframes相当于一个命名空间，后面跟一个名词，与class中的animation-name相对应，经常与transform配合使用

简单动画,直接使用关键字from和to，即从一种状态过渡到另一种状态：
@-webkit-keyframes demo{
    from{left:0;}
    to{left:400px;}
}  

复杂动画,使用百分比，表示每一阶段状态变化：
@-webkit-keyframes demo{
       0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}

duration
默认值为0，表明动画不执行

timing-function
过渡类型

iteration-count
对象动画的循环次数
number：自定义动画执行次数，设置值可为0或正整数。
infinite：无限循环

direction
对象动画运动的方向

normal：正常方向。
reverse：动画反向运行,方向始终与normal相反。（FF14.0.1以下不支持）
alternate：动画会循环正反方向交替运动，奇数次（1、3、5……）会正常运动，偶数次（2、4、6……）会反向运动，即所有相关联的值都会反向。
alternate-reverse：动画从反向开始，再正反方向交替运动，运动方向始终与alternate定义的相反。（FF14.0.1以下不支持）

其他：animation-fill-mode
播放后的状态

none：默认值。不设置对象动画之外的状态
forwards：结束后保持动画结束时的状态，但当animation-direction为0，则动画不执行，持续保持动画开始时的状态
backwards：结束后返回动画开始时的状态
both：结束后可遵循forwards和backwards两个规则

其他：animation-play-state
检索或设置对象动画的状态

running：默认值。运动  
paused：暂停

DEMO

以百度浏览器特权中心部分代码为例：

@-webkit-keyframes card-green {
    0% {
        -webkit-transform: rotate(-32deg)
    }

    50% {
        -webkit-transform: rotate(13deg)
    }

    100% {
        -webkit-transform: rotate(-32deg)
    }
}


@-moz-keyframes card-green {
    0% {
        -moz-transform: rotate(-32deg)
    }

    50% {
        -moz-transform: rotate(13deg)
    }

    100% {
        -moz-transform: rotate(-32deg)
    }
}

@-o-keyframes card-green {
    0% {
        -o-transform: rotate(-32deg)
    }

    50% {
        -o-transform: rotate(13deg)
    }

    100% {
        -o-transform: rotate(-32deg)
    }
}

@keyframes card-green {
    0% {
        transform: rotate(-32deg)
    }

    50% {
        transform: rotate(13deg)
    }

    100% {
        transform: rotate(-32deg)
    }
}

.animation-box .unzip {
    position: absolute;
    top: 0;
    left: 0;
}

.animation-box .unzip-card-green {
    top: 28px;
    left: 33px;
    z-index: 1;
    background-position: -71px -431px;
    -webkit-transform: rotate(-32deg);
    -moz-transform: rotate(-32deg);
    -o-transform: rotate(-32deg);
    transform: rotate(-32deg);
}

.animation-box:hover .unzip-card-green {
    -webkit-animation: card-green .8s linear infinite;
        -moz-animation: card-green .8s linear infinite;
    -o-animation: card-green .8s linear infinite;
    animation: card-green .8s linear infinite;
}

其他：

.button1 {
    color: rgba(255,255,255,1);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    border: 1px solid rgba(255,255,255,0.5);
}
.button1 a{
    color: rgba(51,51,51,1);
    text-decoration: none;
    display: block;
}
.button1:hover {
    background-color: rgba(255,255,255,0.2);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;    
}