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使用硬件加速。