Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css3 animation delay at each step

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #42038
    AttilaEgyed
    Participant

    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?

    #121238
    Kitty Giraudel
    Participant

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.