一、transform 和@keyframes动画的区别：
@keyframes动画是循环的，而transform 只执行一遍.
二、@keyframes
CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
通过 @keyframes 规则，您能够创建动画。
@keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。
@keyframes 它定义的动画并不直接执行，需要借助animation来运转。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
语法: @keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
| animationname | 必需。定义动画的名称 |
| keyframes-selector | 必需。定义动画的名称。 合法的值： 1. 0-100% 2. from（与 0% 相同） 3. to（与 100% 相同） |
| css-styles | 必需。一个或多个合法的 CSS 样式属性 |
例一:
.load-border {
width: 120px;
height: 120px;
background: url(../images/loading_icon.png) no-repeat center center;
-webkit-animation: gif 1.4s infinite linear;
animation: gif 1.4s infinite linear;
}
@keyframes gif {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
例二:
.img {
width: 120px;
height: 120px;
background: url(../images/icon.png) no-repeat center center;
-webkit-animation: gif 1.4s infinite linear;
animation: mymove 1s infinite linear;
}
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
三、transform：
transform的属性包括：rotate()（旋转） / skew()（倾斜） / scale()（比例） / translate()（位移） ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
例一:
transform:rotate(10deg)：旋转；其中“10deg”表示“10度”。
例二:
transform:skew(20deg)：倾斜；
例三:
transform:scale(1.5)：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。
例四:
transform:translate(120px,0)：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”
综合:
综合在一起：(效果是动态)
transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);