css3 multiple animations with different durations - html

Question

Is it possible to give an element multiple animations with different durations using CSS3 animations?
What I want to have eventually is have the ball to keep rotating after finishing. I know I could do this with giving multiple classes. But I would like to avoid that to prevent messy amount of classes.
(the Fiddle might not work on other browsers than Chrome, I just rapidly hacked it together)
Fiddle example of what I have currently http://jsfiddle.net/cchsh6om/2/
Here's the CSS
div {
margin: 20px;
width: 100px;
height: 100px;
border-radius: 46px;
position: relative;
background: #ddd;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-out;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
span{
position: absolute;
line-height: 100px;
left:48%;
}
#-ms-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-ms-transform: rotate(0deg); }
to {
opacity: 1;
margin-left: 20px;
-ms-transform: rotate(-360deg); }
}
#-moz-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-moz-transform: rotate(0deg);
}
to {
opacity: 1;
margin-left: 20px; -moz-transform: rotate(-360deg); }
}
#-webkit-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-webkit-transform: rotate(0deg); }
to {
opacity: 1;
margin-left: 20px;
-webkit-transform: rotate(-360deg); }
}
#keyframes spin {
from {
opacity: 0;
margin-left: 200px;
transform:rotate(0deg);
}
to {
opacity: 1;
margin-left: 20px;
transform:rotate(-360deg);
}
}
And the HTML
<div><span>=</span></div>

Answer 1

Yes, it's possibly, but your syntax is wrong. First of all, use short notation like animation: horizontal linear 8s infinite (for more information read this acticle). Then you you can apply multiple animations separated by comma on the same element:
animation: horizontal linear 8s infinite,
vertical ease-in-out 1.3s infinite alternate,
blink linear .7s infinite alternate,
rotation linear .4s infinite;
and define keyframes for each one of them:
#keyframes horizontal {
from {left: 0;}
to {left: 100%;}
}
#keyframes vertical {
from {top: 0;}
to {top: 200px;}
}
Finally, you can omit to -moz and -ms prefixes. -webkit-animation and animation works on all the modern browsers including mobile.
See my sample of multiple animation at CodePen, i've tested it on many platforms.