chrome的css3过渡问题

Question

我正在研究 SVG，SVG 中的一个对象具有简单的过渡样式，但它在 chrome 中存在问题，它破坏了对象并且无法显示平滑过渡。

你有什么想法吗？ 我已经阅读了很多这样的帖子，但没有一个有帮助： http://www.sitepoint.com/fix-chrome-animation-flash-bug/

这些样式不会改变问题：

-webkit-backface-visibility: hidden; -webkit-transform: scale(1);

<pre>
<style>
.irwild:hover , .comwild:hover , .irstd:hover , .comstd:hover  {
transform: translate(-30px);
-ms-transform: translate(-30px);
-webkit-transform: translate(-30px);}

.irwild , .comwild , .irstd , .comstd  {
-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;
backface-visibility:     hidden; 
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}
</style>
</pre>

Answer 1

如果你有困难的动画使用 -webkit-transform: translateZ(0);让 chrome 使用硬件加速。