Javascript 如果元素最初显示为“无”，则CSS3动画不会在Opera中启动

我试图在js中的某个事件之后显示无限旋转的图像。
在Chrome 26、Firefox 19中运行完美，但在Opera 12（最新版本）中失败

我将初始图像与style=“display:none”一起使用，如下所示：

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

预期行为：请参见旋转图像。歌剧中没有轮换。 这是歌剧迷吗？我知道我可以在图像显示后通过类应用它来启动动画，但我想知道当图像最初设置了动画时如何触发它。 显示初始图像时，动画工作正常（显示：块）

以下是JSFIDLE示例：

我用于旋转的CSS：

#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 {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to { 
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes rotate {
  from {
    -o-transform: rotate(0deg);
  }
  to { 
    -o-transform: rotate(360deg);
  }
}

@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
  }
  to { 
    -ms-transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to { 
    transform: rotate(360deg);
  }
}

---

我刚刚遇到了类似的问题——我一直在尝试js display:none other div（这甚至不会影响动画），然后进入Opera动画冻结（更有趣的是，可以通过进入蜻蜓并重新启用样式的动画部分来解冻）——所以听起来确实像是Opera bug

不管怎样，我刚刚学会了一种变通方法——它将与

display:none

一起工作，而不是

display:none>

可见性：隐藏；高度：0px

另请参阅您的JSFIDLE更新版
，除非您有大量Opera用户，并且将很快部署，否则我会对此感到担心。歌剧院很快就要开演了。
#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 {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to { 
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes rotate {
  from {
    -o-transform: rotate(0deg);
  }
  to { 
    -o-transform: rotate(360deg);
  }
}

@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
  }
  to { 
    -ms-transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to { 
    transform: rotate(360deg);
  }
}