- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
.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 )
Could be your margin, you just want the animation to start back at the begining? Check out this CodePen.
@JohnMotylJr: thanks a lot , thats exactly what I want .
one question why is it moving from left to right rather that right to left ?
@JohnMotylJr: How can I make it moving from right to left ?
Try reversing your 0% and 100%
@-webkit-keyframes move {
0% { margin-left:-800px; }
100% { margin-left:0px; }
}
@JohnMotylJr: thanks a lot , you saved my day , grateful to u
Glad to help :)