fadein - css3 animation triggered each time the div is fadeed in -

i using -webkit-animation on div 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 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 far understand should 1 time animation, when fadeout/hide , fadein/show div jquery adding rule each time animation done each time div shown or fadedin.

is wad or kind of bug?, there anyway avoid behaviour?.

i have animation once , play div without triggering animation each time.

tks.

when hiding, set -webkit-animation none via .css

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

http://jsfiddle.net/bhf8m/