The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    This reply has been reported for inappropriate content.

    What have you tried?

    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed