the best way is to use css animations. it works without jquery and directly on the gif (no div needed)
the gif must have:
@keyframes customanim
{
0% {values;}
100% {values;}
}
@-webkit-keyframes customanim /* Safari and Chrome */
{
0% {css-values;}
100% {more-values;}
}
.animationclass {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
animation: customanim 3s;
-webkit-animation: customanim 5s;
-webkit-animation-fill-mode: forwards;
}
make sure you use “-webkit-animation-fill-mode: forwards” so the gif remains hidden after animation else the gif would return to its original state.
to play the animation again just execute this line in js:
document.getElementById('objecttobeanimated').className="animationclass";
Link to W3C:
http://www.w3schools.com/css3/css3_animations.asp
hope i could help you