Forums

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

Home Forums CSS Increase the animation-duration for each animation-iteration-count.

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

    I am animating a div using css animation.

      @-webkit-keyframes FRAMES
     {
       from{height:400px;}
       to{height:500px;}
     }
    
     .animateclass1{
          -webkit-animation-name: FRAMES;
         -webkit-animation-duration: 0.5s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 10;
        -webkit-animation-direction: alternate;
        -webkit-animation-delay:0s;
          }
    

    But now I want to increase the animation-duration for each animation-iteration-count. My intention is to make the element animate at high speed and stop animating by slowing down the animation speed

    #147329
    Paulie_D
    Member

    You can’t do this with CSS as far as I am aware.

    It might be possible to detect how many iterations there have been with JS/JQ and adjust the duration after each one however.

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