CSS3 双动画

CSS3 双动画

CSS3 双动画

body{background:#666;}
img
{
position:absolute;left:200px;top:100px;
animation-name:myfirst, rotate-back;
animation-duration:1000ms, 10000ms;
animation-timing-function:linear, linear;
animation-delay:0, 1000ms;
animation-iteration-count:1, infinite;
animation-fill-mode:forwards, none;
-moz-animation-name:myfirst, rotate-back;
-moz-animation-duration:1000ms, 10000ms;
-moz-animation-timing-function:linear, linear;
-moz-animation-delay:0, 1000ms;
-moz-animation-iteration-count:1, infinite;
-moz-animation-fill-mode:forwards, none;
-ms-animation-name:myfirst, rotate-back;
-ms-animation-duration:1000ms, 10000ms;
-ms-animation-timing-function:linear, linear;
-ms-animation-delay:0, 1000ms;
-ms-animation-iteration-count:1, infinite;
-ms-animation-fill-mode:forwards, none;
-o-animation-name:myfirst, rotate-back;
-o-animation-duration:1000ms, 10000ms;
-o-animation-timing-function:linear, linear;
-o-animation-delay:0, 1000ms;
-o-animation-iteration-count:1, infinite;
-o-animation-fill-mode:forwards, none;
-webkit-animation-name:myfirst, rotate-back;
-webkit-animation-duration:1000ms, 10000ms;
-webkit-animation-timing-function:linear, linear;
-webkit-animation-delay:0, 1000ms;
-webkit-animation-iteration-count:1, infinite;
-webkit-animation-fill-mode:forwards, none;
}

/myfirst/
@keyframes myfirst {
from {top:-50px;}
to {top:100px;}
}

@-moz-keyframes myfirst {
from {top:-70px;}
to {top:100px;}
}

@-webkit-keyframes myfirst {
from {top:-300px;}
to {top:100px;}
}

@-ms-keyframes myfirst {
from {top:-300px;}
to {top:100px;}
}

@-o-keyframes myfirst {
from {top:-300px;}
to {top:100px;}
}

/rotate-back/
@keyframes rotate-back {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}

@-moz-keyframes rotate-back {
from {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}

@-webkit-keyframes rotate-back {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}

@-ms-keyframes rotate-back {
from {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}

@-o-keyframes rotate-back {
from {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}