2D转换：transform

移动：translate(50px,100px) //根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
旋转：rotate()
缩放：scale()
倾斜：skew()
合并：matrix() //参数为旋转、缩放、移动、倾斜

3D转换：transform

旋转：rotateX()
旋转：rotateY()

过渡：transition

transition:width 1s linear 2s; (样式属性、花费时间、时间曲线、何时开始)

//example
div
{
	width:100px;
	height:100px;
	background:red;
        transition:width 2s;
        -webkit-transition:width 2s; /* Safari */
}
div:hover
{
        width:200px;
}

动画：animation

animation: myfirst 5s linear 2s infinite alternate;

//拆分之后
animation-name: myfirst; 
animation-duration: 5s; 
animation-timing-function: linear; 
animation-delay: 2s;
animation-iteration-count: infinite; 
animation-direction: alternate; 
animation-play-state: running;


div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation: myfirst 5s linear 2s infinite alternate;
}


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