CSS3的animation有八个属性：
1.animation-name规定需要绑定到选择器的动画的keyframe名称；
2.animation-duration规定完成动画所花费的时间，以秒或毫秒计。
3.animation-delay规定在动画开始之前的延迟。
4.animation-iteration-count规定动画应该播放的次数。infinite
5.animation-direction规定是否应该轮流反向播放动画。
6.animation-play-state属性指定动画是否正在运行或已暂停，如paused|running;
7.animation-fill-mode有以下几种取值：
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
9. animation-timing-function规定动画的速度曲线，如linear(匀速)，ease，ease-in，ease-out， ease-in- out以及steps()函数等。
steps 函数指定了一个阶跃函数
第一个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；
step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。
比如：
/*从小变大的*/
@keyframes more{
0%{ transform: scale(0);opacity:1; }
100%{transform: scale(1);opacity:1;}
}
/*从无到有*/
@-ms-keyframes opac{
0%{opacity: 0; }
100%{ opacity: 1; }
}
/*从上到下的*/
@keyframes move{
0%{top:0px;opacity:1; }
100%{top:13px; opacity:1;}
}
/*圆的转动*/
@keyframes rotate{
0%{transform-origin: 5rem 8.6rem;transform: rotate(0deg);}
100%{ transform-origin: 5rem 8.6rem; transform: rotate(-360deg);}
}
.text1yi{
opacity: 0;
animation: move 1s ease-in;
animation-delay:1s;
animation-fill-mode: forwards;
}
translate,transition,transform区别：
变形（transform）、转换（translate）和动画（animation）
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
主要包括 旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)，如：transform:rotate(7deg);
扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg)
缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)
移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离
所有的2D转换方法组合在一起： matrix() 旋转、缩放、移动以及倾斜元素
matrix(scale.x ,, , scale.y , translate.x, translate.y)
改变起点位置 transform-origin: bottom left;（圆心）
综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;
translate:移动，transform的一个方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标）
位置参数。
用法：transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
transition:用于设置四个过渡属性,语法property duration timing-function delay
其中property是要设置过渡效果的CSS属性的名称
duration是设置过渡效果需要的时间
time-function是设置过渡的速度曲线
delay是过渡效果何时开始
比如按钮要过渡颜色的hover和不hover的就用：
-webkit-transition: all .15s ease;
transition: all .15s ease;