javascript - CSS3 animation does not start in Opera if element initially had display: none -

i'm trying show infinitely rotating image after event in js.
works in chrome 26, firefox 19, fails in opera 12 (latest).

i use initial image style="display: none" this:

<img src="http://example.com/img.png" id="test" style="display: none"> 

then show image (remove display: none):

$('#test').show(); 

expected behavior: see rotating image. rotation not happen in opera. opera bug? know can start animation applying class after image shown, want figure out how trigger when image has animation set initially. animation works fine when initial image shown (display: block).

here jsfiddle example: http://jsfiddle.net/vdjll/

css use rotation:

#test {   -webkit-animation: rotate 5s linear 0s infinite normal;   -moz-animation: rotate 5s linear 0s infinite normal;   -o-animation: rotate 5s linear 0s infinite normal;   -ms-animation: rotate 5s linear 0s infinite normal;   animation: rotate 5s linear 0s infinite normal; }  @-webkit-keyframes rotate {   {     -webkit-transform: rotate(0deg);   }   {      -webkit-transform: rotate(360deg);   } }  @-moz-keyframes rotate {   {     -moz-transform: rotate(0deg);   }   {      -moz-transform: rotate(360deg);   } }  @-o-keyframes rotate {   {     -o-transform: rotate(0deg);   }   {      -o-transform: rotate(360deg);   } }  @-ms-keyframes rotate {   {     -ms-transform: rotate(0deg);   }   {      -ms-transform: rotate(360deg);   } }  @keyframes rotate {   {     transform: rotate(0deg);   }   {      transform: rotate(360deg);   } } 

i've ran similar problem - i've been trying js display:none other div (that wasn't affecting animation) , got on opera animation freezed (which, what's more funny, unfreezed entering dragonfly , re-enabling animation part of style) - sounds indeed opera bug.

anyways, learned workaround - instead of display:none, it'll work

visibility:hidden; height: 0px;

see jsfiddle updated http://jsfiddle.net/vdjll/3/