一、transform是只执行一遍

1. 平移（translate）

translateX:沿X轴方向平移
translateY: 沿Y轴方向平移

2.缩放

scaleX: 沿X轴方向放大

scaleY: 沿Y轴方向放大

scale: 沿X,Y轴方向放大

3. 旋转

rotateX: 沿X轴旋转

rotateY：沿Y轴旋转

rotateZ: 沿Z轴旋转

rotate: 不指定轴旋转

二、关键帧@keyframes

@keyframes动画是循环的。

三、关键帧@keyframes和animation协同工作

3.1合作原因

CSS3中新添加的属性animation，是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。

需要另一个属性@keyframes来配合；
使用时为了兼容可加上-webkit-、-ms-、-moz-、-khtml-等前缀以适用不同的浏览器。

3.2创建动画原理

创建动画是将一套CSS样式逐渐变化为另一套样式；
通过@keyframes规则，您能够创建动画；
@keyframes定义一个动画，并定义具体的动画效果，比如放大还是位移；
@keyframes他定义的动画，并不直接执行，需要借助animation来运转。
在动画的过程中您能够多次改变这套CSS样式；
以百分比来规定改变发生的时间，或者通过关键词“from”和“to”，等价于0%和100%。
百分比是指动画完成的时间长度的百分比

3.3定义名称

@keyframes animation { key-frames -selector {css-styles;} }

对应的具体写法如下


@keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40upx);
		}

		100% {
			transform: translateY(0px);
		}
	}

案例1

名字为gif的@keyframes ，动画完成需要的总时长为1.4s,刚开始的时候图片旋转为0度，动画完成的时候图片旋转360度

.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);
    }
}

案例2

名字为mymove的@keyframes ，动画完成需要的总时长为1s,刚开始的时候图片距顶部距离为0px，0.25s后图片距顶部距离为200px，0.5s后图片距顶部的距离为100px，以此类推

.img{
width:120px;
height:120px;
background:url(../images/icon.png) no-repeat center center;
animation:mymove 1s infinite linear;
-webkit-animatin:mymove 1.4s infinite linear;}
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}

}


}

transform和@keyframes的用法