chrome的css3过渡问题

Question

I am working on SVG, an object inside SVG has simple transition style , but it has issue in chrome and it breaks the objects and it can't show smooth transition.

Do you have any idea? I Have already read lots of post like this one and none of them helps: http://www.sitepoint.com/fix-chrome-animation-flash-bug/

These style doesn't change the issue:

-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

if you have difficulty animation use -webkit-transform: translateZ(0); to make chrome use hardware acceleration.