cssfadeinwebkit-animation

css3 animation triggered each time the div is fadeed in

I am using -webkit-animation on a div like the following:

#agFloor {
    background-image: url('http://blabla/something.jpg');
    width: 375px;
    height: 364px;
    top:0;
    left:20px;
    -webkit-animation: FloorAnim 5s ease-in-out; 
}

with the keyframe;

@-webkit-keyframes FloorAnim {
    0% { -webkit-transform: translateY(100%); }
    40% { -webkit-transform: translateY(-60%); }
    80% { -webkit-transform: translateY(-60%); }
    100% { -webkit-transform: translateY(0%); }
}

My question is that as far as I understand this should be a one time animation, but when I fadeOut/hide and fadeIn/show the div with jQuery is like is adding the rule each time so the animation is done each time the div is shown or fadedIn.

Is this a WAD or some kind of bug?, is there anyway to avoid this behaviour?.

I would like to have the animation only once and then play with the div without triggering the animation each time.

Tks.

Solution

  • When you do the hiding, set -webkit-animation to none via .css

    $(this).css("-webkit-animation", "none");

    http://jsfiddle.net/BHF8m/