Grow your CSS skills. Land your dream job.

How to make CSS3 animation

  • # March 22, 2013 at 11:58 am

    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 )

    # March 22, 2013 at 1:48 pm

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

    # March 22, 2013 at 3:11 pm

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

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

    # March 22, 2013 at 3:13 pm

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

    # March 22, 2013 at 4:18 pm

    @sshuvro58,

    Try reversing your 0% and 100%

    @-webkit-keyframes move {
    0% { margin-left:-800px; }
    100% { margin-left:0px; }
    }
    # March 22, 2013 at 8:30 pm

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

    # March 22, 2013 at 8:36 pm

    Glad to help :)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".