CODEWITHSUNDEEP
csscss-animationskeyframe
user1613512
user1613512

Reputation: 3650

CSS 3 weird animation delay

I'm trying to create a CSS3 sliding animation. The slideDown part works, but the going up part doesn't seem to trigger instantly and I can't figure out why.

   .slideUp{
        -webkit-animation:slideUpFrames 1s;
        -webkit-animation-fill-mode: forwards;
    }

    @-webkit-keyframes slideUpFrames{
      0%{
        max-height:1000px;
      }

      100%{
        max-height:0px;
      }
    }

    .slideDown{
          -webkit-animation:slideDownFrames 1s;
          -webkit-animation-fill-mode: forwards;
    }

    .slidable{
        overflow: hidden;
    }

    @-webkit-keyframes slideDownFrames{
      0%{
        max-height: 0px;
      }

      100%{
        max-height:1000px;
      }
    }

I've created a fiddle (webkit only): http://jsfiddle.net/5E7YQ/

How could I fix this?

Upvotes: 1

Views: 218

Answers (1)

apaul
apaul

Reputation: 16180

The slideUp animation is triggering immediately you just can't see the first 940px of the animation, because your <ul class="slidable"> is only 60px tall.

enter image description here

So now that we know what's going on here's how it can be fixed:

Working Example

.slideUp {
    -webkit-animation:slideUpFrames .5s; /* shorten time */
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes slideUpFrames {
    0% {
        max-height:60px; /* change 1000px to the height of the element */
    }
    100% {
        max-height:0px;
    }
}
.slideDown {
    -webkit-animation:slideDownFrames .5s; /* shorten time */
    -webkit-animation-fill-mode: forwards;
}
.slidable {
    overflow: hidden;
}
@-webkit-keyframes slideDownFrames {
    0% {
        max-height: 0px;
    }
    100% {
        max-height:60px; /* change 1000px to the height of the element */
    }
}

Or if you would like you can shorten the whole thing and use .slideUp(); and .slideDown();

Working Example 2

Upvotes: 1

Related Questions