CSS3 中和动画有关的属性有三个 transform 、transition 和 animation 下面一一说明
transform
从字面来看transform 的释义为改变，使...改变，转换，这里我们可以理解为变形，那都能怎么变呢，
node 表示不进行变化
rotate 旋转 transform:rotate(20deg) 旋转角度可以为负数。需要先有 transform-origin 定义旋转的基点可为 left top center right bottom或者坐标值（50px 70px）
skew 扭曲 transform:skew(30deg,30deg) skew(相对X轴倾斜，相对Y轴倾斜)
scale 缩放 transform:scale(2,3) 横向放大2倍，纵向放大3倍 【等多放大写一个参数即可】
translate 移动 transform:translate(50px,50px) 位移【类似position 的left 以及 top】
matrix 矩阵变形 transform:matrix(a,b,c,d,tx,ty) ;其中a,b,c,d 是一个二维矩阵
transition
W3c 标准中对CSS3 的transition是这样描述的：“CSS的transition 允许CSS的属性值在一定的时间区内平滑的过渡。这种效果可以在鼠标点击、活的焦点、被点击或对元素任何改变中触发，并圆滑以动画效果改变CSS的属性值”
transition 主要包含四个属性值
transition-property： 执行变换的属性
transition-duration： 变换持续的时间
transition-timing-function： 在延续时间段，变换的速率变化
transition-delay: 变换延迟时间
transition-property
是用来指定当元素其中一个属性改变时执行transition 效果，其主要有以下几个值：
none （没有属性改变）
all（所有属性改变）
indent （元素属性名） ，当其值为none 时，transition 马上停止执行，当指定all 时，则元素产生任何属性值变化时都将执行transition 效果，ident 是指定元素的某一个属性值。
transiton-dutation
transiton-duration 是用来指定元素转换过程的持续时间，取值：<time> 围殴数值，单位为s（秒），可以作用于所有元素，包括:before 和：after 伪元素。其默认值为0 也就是变换时是即时的
transition-timing-function
取值
transition-timing-function 的值允许你根据时间的推荐去改版属性值的变换速率，transition-timing-function 有6个可能值
1.ease (逐渐变慢) 默认值,ease 函数等同于贝塞尔曲线
2.linear （匀速），linear 函数等同于贝塞尔曲线
3.ease-in （加速）
4.ease-out(减速)
5.ease-in-out 加速然后减速
6.cublic-bezier
transition-delay
transition-delay 是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果
animation
故名思议为动画的意思。Animation 应用在页面DOM上使其产生动画的效果。在开始介绍Animation 之前我们有必要来了解一个特殊的东西，那就是“keyframes” 我们把他叫做“关键帧”，玩过flash 的朋友可能对这个东西并不会陌生。
@keyframe 'wobble' {
0% {
margin-left:100px;background:green
}
40% {
margin-lef:150px;background:orange;
}
60% {
margin-left:75px;backgrouns:blue
}
100% {
margin-left:100px;background:red
}
}
key frames定义好了以后，就可以去调用定义好的动画 wobble
下面我们来看下怎么给一个元素调用animation
.demo{
50px;height:50px;
margin-left:100px;
background:blue;
animation-name: 'wobble'; /* 动画属性名，对应前面的keyframes 定义的动画名*/
animation-duration:10s; /* 动画持续时间*/
animation-duration: 10s;/*动画持续时间*/
animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
animation-delay: 2s;/*动画延迟时间*/
animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
animation-direction: alternate;/*定义动画方式*/
}
SS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一 个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来 改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的 animation就需要明确的动画属性值，这也就是回到我们上面所说的，我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间 段变化的效果。