CSS（3）-动画

动画

//平移
-webkit-transform: translate(100px,100px);
-moz-transform: translate(100px,100px);
-ms-transform: translate(100px,100px);
-o-transform: translate(100px,100px);
transform: translate(100px,100px);

//缩放
-webkit-transform: scale(1.1,1.5);
-moz-transform: scale(1.1,1.5);
-ms-transform: scale(1.1,1.5);
-o-transform: scale(1.1,1.5);
transform: scale(1.1,1.5);

//扭曲
-webkit-transform: skew(10deg, 10deg);
-moz-transform: skew(10deg, 10deg);
-ms-transform: skew(10deg, 10deg);
-o-transform: skew(10deg, 10deg);
transform: skew(10deg, 10deg);

//旋转
-webkit-transform: rotate3d(1,-1,0,60deg);
-moz-transform: rotate3d(1,-1,0,60deg);
-ms-transform: rotate3d(1,-1,0,60deg);
-o-transform: rotate3d(1,-1,0,60deg);
transform: rotate3d(1,-1,0,60deg);

//rotateX，rotateY
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);

//动画过渡 all 0.5s ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier 1s
//所有变化，过渡事件，过渡函数，延迟时间
transition: width 1s,background 2s;

//使用关键帧制作动画，绕Y轴旋转的效果
@keyframes spin {
from{
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
to{
-webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
@keyframes spin2 {
0% {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
50%
{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
100%
{
-webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}

//通过js控制running，paused改变动画状态。
animation-play-state: running;

//兼容性的动画，正向运动完，再反向运动。
-webkit-animation: myfirst 5s infinite alternate;
-o-animation:myfirst 5s infinite alternate;
-moz-animation: myfirst 5s infinite alternate;
-ms-animation: myfirst 5s infinite alternate;
animation:myfirst 5s 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;
}
}
@-webkit-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;
}
}
@-moz-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;
}
}
@-ms-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;
}
}
@-o-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;
}
}