transform,transition,@keyframe的区别

1.transform

对元素自身的改变。

包括：

　　平移：translate(X/Y)

　　翻转:rotate(20deg)

　　缩放:scale(X/Y)

　　倾斜/透视：skew(..)

2.transiton

对元素css样式的改变（width，height，opacity。。。。），有动效， 包含起始和终止两个状态。

transition有四个属性：transition-property transition-duration transition-timing-function transition-delay

示例：　　transition: width 2s linear 1s

当元素的width属性发生变化时，该变化将在2s内以恒定的速度进行过渡，但在过渡开始前会有1s延迟

3.@keyframe annimation

定义了一组关键帧，也就是几个状态。每个状态可以包含多个css样式

如：　　

@keyframes mymove {
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}