对css3中的transform transiton animate的理解

transform 是实现的是元素的变形（静态）

主要使用有

transform：translate() 平移
transform：rotate() 旋转
transform-origin: x, y 主要结合rotate来使用 规定旋转的中心点再哪
transform：scale() 缩放
transform：skew() 倾斜

transition是实现的是动画的过程

主要使用有

transition: all .5s ease-in-out 1s;
transition-property ：all | none | indent 属性改变时执行transition效果
transition-duration ：动画所需的时间
transition-timing-function 改变属性值的变换速率
transition-delay 动画延迟多久才开始

animation是transition的一个拓展

animation中增加了一个keyframes属性来定义动画的时间轴和关键帧
animation-name 绑定到选择器的 keyframe 名称
animation-duration 成动画所花费的时间
animation-timing-function 规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数
animation-direction 规定是否应该轮流反向播放动画。

@keyframes mykeyframes{
    0%{

    }
     50%{
     }
     100%{
     }
}