css3动画过渡

transform

2D转换

1. translate()、translateX(n)、translateY(n)
   根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

div{
	transform: translate(50px,100px);/* 从左边元素移动50个像素，并从顶部移动100像素 */
	-ms-transform: translate(50px,100px); /* IE 9 */
	-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

2. rotate()
   在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

div{
	transform: rotate(30deg); /* 元素顺时针旋转30度 */
	-ms-transform: rotate(30deg); /* IE 9 */
	-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

3. scale()、scaleX(n)、scaleY(n)

div{
	transform: scale(2,3); /* 转变宽度为原来的大小的2倍，和其原始大小3倍的高度 */
	-ms-transform:scale(2,3); /* IE 9 */
	-webkit-transform: scale(2,3); /* Safari */
	
}

4. skew()、skewX(angle)、skewY(angle)
   包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
   - skewX();表示只在X轴(水平方向)倾斜
   - skewY();表示只在Y轴(垂直方向)倾斜。

div{
	transform: skew(30deg,20deg);/* 元素在X轴和Y轴上倾斜20度30度 */
	-ms-transform: skew(30deg,20deg); /* IE 9 */
	-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

5. matrix()
   六个参数：旋转，缩放，移动（平移）和倾斜功能

div
{
	transform:matrix(0.866,0.5,-0.5,0.866,0,0);
	-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
	-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

3D转换

1. rotateX()、rotateY()
   rotateX()，围绕其在一个给定度数X轴旋转的元素
   rotateY()，围绕其在一个给定度数Y轴旋转的元素

div{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}
div{
    transform: rotateY(120deg);
    -webkit-transform: rotateY(120deg); /* Safari 与 Chrome */
}

2. translate3d(x,y,z)、translateX(x)、translateY(y)、translateZ(z)
   3D 转化
3. scale3d(x,y,z)、scaleX(x)、scaleY(y)、scaleZ(z)
   3D 缩放转换
4. rotate3d(x,y,z,angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)
   3D 旋转
5. perspective(n)
   3D 转换元素的透视视图

transition

div{
    transition: width 2s;/* 宽度属性的过渡效果，时长为 2 秒 */
    -webkit-transition: width 2s; /* Safari */
}

div{
	transition: width 2s, height 2s, transform 2s;/* 宽度，高度和转换效果 */
}

所有过渡属性

div{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

animation

div{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}


div{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

@keyframes

@keyframes myfirst{
    from {background: red;}
    to {background: yellow;}
}

/* 把myfirst绑定到div上面 */
div{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

变化的多种效果

@keyframes myfirst{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}