首先，我们要想用css3来做一个动画，不可避免的要用到transform和animation这两个属性值。
transform的用法
首先呢，我们的transform的组合一共有5种，分别是：
transform：translate（）；
transform：rotate（）；
transform：scale（）；
transform：skew（）；
transform：matrick；
transform：translate（）
接下来我们说一下transform：translate（）；所代表的意义和用法。
意义：让元素以当前位置向 x 、y轴进行移动。
#box{transform: translate(100px , 100px);}这个代码的意思是让id名为box的元素分别沿着 x 轴和 y 轴移动100px（注意：两个数值之间用逗号隔开）。如图所示：移动前后的对比：
transform：rotate（）；
然后是rotate，它表示的是让元素进行旋转，里面的数值可以为负，当里面的数值为正数时，表示该元素顺时针旋转；为负数时，该元素以逆时针旋转；单位可以是 deg 表角度（度数），rad 表弧度。例如
：#box{transform: rotate(45deg /* -45deg */ );} 表示的就是 id 为 box 的元素旋转 45° 角。如图：旋转前后对比图
transform：scale（）；
scale表示缩放，就是在元素的初始大小的基础上面对元素进行放大或缩小。
使用方法：
transform：scale（num）；这个时候里面的数值num表示同时放大或缩小该元素的宽和高。
transform：scale（num1 ， num2）；这个时候 scale 里面有两个数值，其中第一个表示宽的值，第二个表示高的值。例如：
#box{ transform:scale(2 , 3);} 这个代码的意思是把 id 名为 box 的元素宽放大2倍，高放大3倍。如图所示：对比前后
transform：skew（）；
skew属性表示斜切。transform：skew（num1 ，num2）；其中num1表示x，对 x 方向进行倾斜，意思是元素沿着 y 方向进行倾斜； num2表示y，同理，对 y 方向进行倾斜，元素沿着 x 轴方向进行倾斜；skew的单位是 “deg”；
例如代码：#box{auto; transform:skew(30deg , 30deg);}
将会出现如图所示的前后对比效果效果：
transform-origin
就是改变被转换元素的基点位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
注：该属性必须与 transform 属性一同使用。
animation的用法
原理：逐帧动画。会把整个运动过程，划分成100份。
animation是在页面加载后就触发；可以设置播放次数可以一直播放，作用于元素本身而不是样式属性，可以使用关键帧的概念，可以实现更自由的动画效果。
animation-name : ；设置动画的名字 (可以随意写)
animation-duration : ；表示动画完成一周期所需要的时间，单位：秒或毫秒
animation-delay : ；表示动画开始前的延迟时间
animation-iteration-count : ；表示动画的重复次数 ，默认值就是1 ，infinite无限次数
animation-timing-function : ；动画的运动形式，也就是速度曲线
animation-direction : 属性定义是否应该轮流反向播放动画。其中：alternate : 一次正向，一次反向
reverse : 永远都是反向
normal (默认值) : 永远都是正向
animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效
关于animation-fill-mode :的css代码如下：
<style> #box1{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move;/* 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效 */ } #box2{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move; animation-fill-mode : backwards; /* 在延迟的情况下，让0%在延迟前生效 */ } #box3{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move; animation-fill-mode: forwards;/* 在运动结束的之后，停到结束位置 */ } #box4{ width:100px; height:100px; background:red; margin:10px; animation: 3s 2s move; animation-fill-mode: both;/* backwards和forwards同时生效 */ }
@keyframes move { 0%{ transform:translate(0,0); background:blue;} 100%{ transform:translate(400px,0)} }
#box{width:100px; height:100px; background:red; margin:10px; animation: 3s wjt infinite;/* 无限次数 */ animation-direction: alternate; } @keyframes wjt { 0%{ transform:translate(0,0);} 100%{ transform:translate(400px,0)} } </style>
复合写法：animation：2s 3s wjt linear infinite；
分别表示的是：从左到右:动画完成一个周期所需要的时间；动画开始前的延迟时间；动画的名字；动画的速度曲线；动画完成的次数。
关键帧
@keyframes + 动画的名字{
from{}
to{}
}
其中 from 表示起点位置，等价于0%；to 表示终点位置，等价于 100%；
注：默认情况下，元素运动完毕后，会停留到起点位置。
下面是一个球行在一个物体里面运动的动画。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #main{ width: 600px; height: 600px; border: 1px solid black; position: relative; } #main .main-pic{ width: 100px; height: 100px; position: absolute;left: 0;top: 0; animation: 4s -2s wjt linear infinite; transition: 4s; border-radius: 50%; background:linear-gradient(yellow , hotpink) } @keyframes wjt{ 0%{transform: translate(0 , 0)rotateZ(0deg);} 25%{transform: translate(500px , 0)rotateZ(360deg);} 50%{transform: translate(500px , 500px);} 75%{transform: translate(0 , 500px)rotateZ(360deg);} 100%{transform: translate(0 , 0)rotateZ(360deg);} } </style></head><body> <div id="main"> <div class="main-pic"></div> </div></body>
