CSS3中的动画分为：平移动画、过渡动画和自定义动画三种。
平移动画 transform: 平移translate / 旋转rotate / 放大scale / 倾斜skew
过渡动画：transition: transition是一个复合属性，包括：
transition-property:过渡属性(即哪些元素使用过渡动画)；
transition-delay：过渡延时；
transition-duration：过渡时间；
transition-timing-function：过渡方式（linear匀速播放、ease-in-out以低速开始和结束、ease-in以低速开始、ease-out低速结束、ease默认，以低速开始，然后加快，在结束前变慢。）
//注：如果写复合属性，当出现两个时间，则第一个为动画时间，第二个表示延时时间；如果只有一个时间，则表示的时动画时间。
自定义动画(帧动画）：animation: 动画名称 时间 运动方式 是否循环;
animation-name: zidingyi; 动画名称;
animation-delay: 1s ; 动画延迟时间;
animation-direction: alternate; 动画的播放方向
animation-duration: 3s; 动画的播放时间;
animation-iteration-count: 1; 动画的播放次数 （如果其后的属性值为infinite，则表示自定义的动画一直循环播放;）
animation-play-state: running; 动画播放是否暂停;
animation-timing-function: linear; 动画的播放方式;
动画播放序列的声明：（两种写法）
@keyframes [定义的动画名]{
方式一：from{ }
to{ }
使用“from”和“to”来代表一个动画是从哪开始，到哪结束。也就是说这个 “from"就相当于"0%”，而"to"相当于"100%"
方式二： 0%{ }
30%{ }
50%{ }
80%{ }
100%{ }
}
可以在这个规则中创建多个百分比，分别在每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动、改变元素颜色、位置、大小、形状等。数值段必须是百分数，如果不是百分数，这个keyframes是无效的，不会起任何作用。keyframes的单位只接受百分比值***
温馨提示
对同一样式的动画设置不同的延迟时间及动画时间，产生的最终效果可能不同；
animation有一个属性step可以设置每一帧的间隔时间；
使用transform-style: preserve-3d ,可以转换为3D效果;
小技巧：如果要同时对一元素进行平移和旋转，个人建议可以先平移后旋转，因为旋转后元素的坐标位置会发生改变，得重新计算平移的方向和像素大小，不太方便，先平移的话就可以很好的解决这一问题；。
旋转的中心点不对时，可以通过transform-origin属性来设置，可以加一个边框 来测试一下，修改完后再去掉边框就好了。