CSS3 анимация запускается каждый раз, когда DIV будет fadeed в

Question

Я использую -webkit-анимацию на DIV, как следующее:

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

с ключевым кадром;

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

Мой вопрос заключается в том, что, насколько я понимаю, это должно быть одно время анимации, но когда я FADEOUT/скрыть и FadeIn/показать DIV с JQuery это как добавляет этому правилу каждый раз, так что анимация выполняется каждый раз, когда div отображается или исчезает.

Это WAD или какая-то ошибка ?, так или иначе, чтобы избежать такого поведения ?.

Я хотел бы иметь анимацию только один раз, а затем играть с div без запуска анимации каждый раз.

Tks.

Answer 1

Когда вы скрытие, установите -webkit-animation в none через .css

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

http://jsfiddle.net/BHF8m/