1：动画的使用，用keyframes来实现，示例代码如下：
例一：
<image class="c" src="../../images/touxiang.png" style="width:200rpx;height:200rpx; position: relative;"></image>//如果要对left，right，top,bottom设置动画的话，记得设置position，因为默认position是static，static是不支持left，right，top,bottom操作的。
.c {
animation: mymove 5s infinite;//infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
例二：rotate和skew的参数单位是度数所以要用deg，而translate的单位可以是px，也可以是rpx。
<image class="c" src="../../images/touxiang.png" style="width:200rpx;height:200rpx;margin-top:50%;margin-left:30%;"></image>
.c {
animation: mymove 2s infinite;
}
@keyframes mymove {
from {
transform: rotate(7deg) skew(50deg) translate(30rpx, 30rpx);
}
to {
transform: rotate(700deg) skew(5deg) translate(100rpx, 100rpx);
}
}
例三：
<image class="c" src="../../images/touxiang.png" style="width:200rpx;height:200rpx;margin-top:50%;margin-left:30%;"></image>.
.c {
animation: mymove 2s infinite;
}
@keyframes mymove {
from {
transform: rotate3d(100,200,300,0deg)
}
to {
transform: rotate3d(200,300,400,360deg)
}
}
具体的方法和参数如下：
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 倾斜转换。
如果想查看方法的具体效果的话，可以查看如下网址
参考网址：
http://www.w3school.com.cn/cssref/pr_transform.asp
http://www.runoob.com/cssref/css3-pr-transform.html
例四：animation-timing-function属性(规定动画的速度曲线)的用法：
<image class="c" src="../../images/touxiang.png" style="width:200rpx;height:200rpx;"></image>
.c {
animation: mymove 5s infinite;
animation-timing-function: ease-in-out;
}
@keyframes mymove {
from {
transform: translateX(0rpx)
}
to {
transform: translateX(500rpx)
}
}
animation-timing-function的具体属性值如下：
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
参考网址：
http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp
两个学习css所有属性的网址：
http://www.w3school.com.cn/cssref/index.asp
http://www.runoob.com/cssref/css3-pr-animation-timing-function.html
