Forums

AttilaEgyed

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?

ChrisP

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

HugoGiraudel

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

treehouse : what would you like to learn today?

Forums

css3 animation delay at each step