Jeff Jeff -4 years ago 139
CSS Question

How to make a css3 Animation go left and right

I have 6 CSS3 animations I want half of them to go right and the other half to go left. Is this possibly to do separately or does it have to be the same.Also can I change the speeds of them separately?

This is what I currently have



<html>
<style>

#A,#B,#C,#D,#E,#F,#G{
position:absolute;
left:-20%; /* Set initial position for each image off-screen left -- adjust according to image width */
animation:mymove 8s infinite; /* total animation time for each image is 8 seconds, loops forever */
animation-direction:normal;
/* Firefox */
-moz-animation:mymove 8s infinite;
-moz-animation-direction:normal;
/* Safari, Chrome, and Webkit Opera */
-webkit-animation:mymove 8s infinite;
-webkit-animation-direction:normal;
/* Presto Opera */
-o-animation:mymove 8s infinite;
-o-animation-direction:normal;
}

/* start each image's animation 2 seconds after the previous */
#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 /* Firefox */
{
from {left:-5%;}
to {left:100%;}
}

@-webkit-keyframes mymove /* Safari, Chrome, and Webkit Opera */
{
from {left:-5%;}
to {left:100%;}
}

@-o-keyframes mymove /* 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>




Answer Source

Something like this?

http://codepen.io/anon/pen/vxjoKo

 If you want to change the speed change the value in 
-moz-animation:mymove 8s infinite;

Change the 8s to whatever you want, and then all it for all the other times it is set, the smaller the number the quicker the time.

Also for the future learn to move everything inside you tag to a seperate css file

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download