A animação css3 é acionada a cada vez que a div é desvanecida - css3, fadein, webkit-animation

Estou usando -webkit-animation em uma div como o seguinte:

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

com o quadro-chave;

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

Minha pergunta é que, tanto quanto eu entendo issodeve ser uma animação única, mas quando fadeOut / ocultar e fadeIn / mostrar a div com jQuery é como adicionar a regra a cada vez, para que a animação seja feita sempre que a div for exibida ou desvanecida.

Isso é um WAD ou algum tipo de bug ?, existe uma maneira de evitar esse comportamento ?.

Gostaria de ter a animação apenas uma vez e depois brincar com o div sem acionar a animação a cada vez.

Tks

Respostas:

Quando você esconder, defina -webkit-animation para none através da .css

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

http://jsfiddle.net/BHF8m/