Grow your CSS skills. Land your dream job.

css3 animation delay at each step

  • # January 16, 2013 at 6:39 pm

    Hi, i would like to make a slider with css3, I dont want any buttons for it. just an infinite animation that slides 5 individual images, the problem is i want something like this:

    load in the page, wait 30sec then show 2nd wait 30sec then show 3rd wait 30sec then show 4th wait 30 sec then show 5th wait 30 sec then show first

    #overflow #banner {
    height: 350px;
    width: 500%;
    background: #fff;
    -webkit-animation:slide-animation 10s infinite;
    }

    @-webkit-keyframes slide-animation {
    0% {margin-left: 0;}
    20% {margin-left:-100%;}
    40% {margin-left:-200%;}
    60% {margin-left:-300%;}
    80% {margin-left:-400%;}
    100% {margin-left:0;}
    }

    how can i do that?

    # January 17, 2013 at 12:05 am

    What have you tried? http://codepen.io

    # January 17, 2013 at 3:57 am

    You’ll have to make a 5*30 = 150s long animation properly customized. It will be long and annoying, I tell you.

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

You must be logged in to reply to this topic.

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