CODEWITHSUNDEEP
htmlcss
Jeff
Jeff

Reputation: 13

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>

Upvotes: 1

Views: 602

Answers (2)

osahan
osahan

Reputation: 206

Here try this

https://jsfiddle.net/robi_osahan/9pLrzqkj/

CSS

.item-container {
    position: relative;
}

.left-item,
.right-item {
    position: absolute;
}

.left-item {
    left: -20%;
    animation: left-to-right 8s infinite;
}

.right-item {
    right: -20%;
    animation: right-to-left 8s infinite;
}

@keyframes left-to-right {
    from {
        left: -20%;
    }
    to {
        left: 120%;
    }
}
@keyframes right-to-left {
    from {
        right: -20%;
    }
    to {
        right: 120%;
    }
}

MARKUP 

<div class="item-container">
    <img src="https://dummyimage.com/200x150/000/fff&text=A" id="A" alt="A" class="left-item" />
    <img src="https://dummyimage.com/200x150/000/fff&text=B" id="B" alt="B" class="right-item" />
</div>

Upvotes: 0

JohnB
JohnB

Reputation: 948

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

Upvotes: 1

Related Questions