How to make CSS3 animation

[sshuvro58]

In my website ,there is a project slider(basically image with little text) . The images are actually a list item under an un ordered l. There are right now 4 images . The slide show starts with every 4 images and moving to right . After the movement of each element it starts over again . But I want to make it rounded , so that the 1st element will automatically come after 4th element .

The properties I applied to

is

.home-loop .post-list {
width: 9999px;

overflow: hidden;
-webkit-animation-name: move;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: right;
-webkit-animation-timing-function: linear;
}

and for animation

@-webkit-keyframes move {
0% {
margin-left: -100px;
}

100% {
margin-left: 800px;
}
}

How can I accomplish it
My working website
http://aniyanetworks.net/Blog/ (plz check the animation below )

[JohnMotylJr]

Could be your margin, you just want the animation to start back at the begining? Check out this CodePen.

[sshuvro58]

@JohnMotylJr: thanks a lot , thats exactly what I want .

one question why is it moving from left to right rather that right to left ?

[sshuvro58]

@JohnMotylJr: How can I make it moving from right to left ?

[JohnMotylJr]

@sshuvro58,

Try reversing your 0% and 100%

@-webkit-keyframes move {

0% { margin-left:-800px; }

100% {  margin-left:0px; }

}

[sshuvro58]

@JohnMotylJr: thanks a lot , you saved my day , grateful to u

[JohnMotylJr]

Glad to help :)

[Author]

Posts