I have 6 different CSS3 animations that I want to split between going right and left. Can these animations be applied separately or do they all have to be the same direction? Is it also possible to adjust the speed of each animation individually?
Here is my code snippet:
<html>
<style>
#A,#B,#C,#D,#E,#F,#G{
position:absolute;
left:-20%; /* Sets initial position off-screen to the left -- adjust according to image width */
animation:mymove 8s infinite;/* Total animation time for each image is set to 8 seconds, loops forever */
animation-direction:normal;
/* For Firefox */
-moz-animation:mymove 8s infinite;
-moz-animation-direction:normal;
/* For Safari, Chrome, and Webkit Opera */
-webkit-animation:mymove 8s infinite;
-webkit-animation-direction:normal;
/* For Presto Opera */
-o-animation:mymove 8s infinite;
-o-animation-direction:normal;
}
/* Starts each image's animation with a 2-second delay after the previous one */
#A{
animation-delay:0s;
-webkit-animation-delay: 0s;
}
#B{
animation-delay:2s;
-webkit-animation-delay: 2s;
}
#C{
animation-delay:4s;
-webkit-animation-delay: 4s;
}
#D{
animation-delay:6s;
-webkit-animation-delay: 6s;
}
#E{
animation-delay:4s;
-webkit-animation-delay: 8s;
}
#F{
animation-delay:2s;
-webkit-animation-delay: 10s;
}
#G{
animation-delay:0s;
-webkit-animation-delay: 12s;
}
/* Animation start and stop points */
@keyframes mymove
{
from {left:-5%;}/*off-screen left (adjust for image width) */
to {left:100%;}/*off-screen right*/
}
@-moz-keyframes mymove /* For Firefox */
{
from {left:-5%;}
to {left:100%;}
}
@-webkit-keyframes mymove /* For Safari, Chrome, and Webkit Opera */
{
from {left:-5%;}
to {left:100%;}
}
@-o-keyframes mymove /* For Presto Opera */
{
from {left:-5%;}
to {left:100%;}
}
</style>
<div>
<img src="A.gif" id="A" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="B" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="C" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="D" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="E" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="F" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="G" alt="A"/>
</div>
</html>