刚开始接触CSS3动画，就觉得很有意思，很新颖，但是掌握起来就不是那么容易了。
对于数学思维不是很好的我来说，真的对于动画的学习很困难，难道就此打退堂鼓吗？不是的。我觉得理论知识的学习很重要，只有当你很熟悉动画属性时，才会更好地结合实践。下面是我认为学起来相对吃力的地方，希望能够帮助也有相同疑惑的你们。
1.认识transform
transform是什么？
transform的含义是：改变，使…变形；转换
transform有哪些属性？transform：属性（值）；
transform的属性包括：旋转rotate() 倾斜skew() ，缩放scale() ，位移 translate() ,矩阵matrix(),原点transform-origin
a. 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。注：其中“deg”是“度”的意思，如“10deg”表示“10度，同skew()中deg。
b.倾斜skew()函数让元素以其中心位置围绕x轴和y轴按照一定角度倾斜。注：skew()不会旋转，只会改变元素的形状。而rotate()不会改变元素的形状，只会旋转。
c.缩放scale() 函数让元素根据中心原点对对象进行缩放。注：缩放scale() 的默认取值是1，当值设为0.01-0.99之间，为缩小，反而反之。
d.位移 translate()函数可以将函数向指定的方向移动。注：不会影响x,y轴上的任何web组件，向左向下位移则为负“-”。
e.矩阵matrix()是一个含六个值（a,b,c,d,e,f）变换矩阵。
f.原点transform-origin 改变原点的位置（前面我们提到的transform的方法都是基于元素的中心来变换的，也就是元素变换的基点默认是元素的中心）。
2.认识transition
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
a.transition-property： 指定对HTML元素的哪个css属性进行过渡渐变处理，这个属性可以是color、width、height等各种标准的css属性。 b.transition-duration：指定属性过渡的持续时间
c.transition-timing-function：指定渐变的速度(过渡的“缓动函数”)：
1、ease：（逐渐变慢）默认值
2、linear：（匀速）
3、ease-in：(加速)称为渐显效果
4、ease-out：（减速）称为渐隐效果
5、ease-in-out：（加速然后减速）称为渐显渐隐效果
d.transition-delay：指定延迟时间，也就是经过多长时间才开始执行过渡过程。
例如：a{ transition :background 0.8s ease 0.3s;} 等价于：
a{transition-property：background;
transition-duration：0.8s;
transition-timing-function：ease;
transition-delay：0.3s;}
借助transition的帮忙来演示一个关于css3 transform的实例：
a{ transition :all 0.8s ease 0.3s;}
a:hover{transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);}
3.认识animation
要使用animation动画，必须知道keyframes，被称为关键帧。
Keyframes的语法规则:命名是由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则。即：@keyframes+动画名称+{......}
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-fuction 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
例如：.block{
animation :mingzi 0.8s ease 0.3s;}
@keyframes mingzi{
from{background:red;}
to{background:green;} }
下面是我做的很简单的小例子，希望有需要的可以了解一下
file:///C:/Users/ASUS/Desktop/%E7%89%B9%E6%95%88/%E7%89%B9%E6%95%88.html