CSS转换在Chrome中无法正常运行
我的CSS转换在Chrome中无法正常运行。 它在Chrome中提供了模糊效果，但在Firefox中运行良好。
这是圆圈动画的代码片段 。 我建议您在Chrome中以及屏幕的最大宽度查看此内容。
这是HTML：
CSS：
.bubble { position: relative; left: 50px; top: 20px; transform: scale(1); width: 50px; height: 50px; border-radius: 50%; background-color: #C00; transition-origin: center; transition: all 0.5s; overflow: hidden; } .bubble.animate { transform: scale(30); } .bubble.ani { transform: scale(1); }
JavaScript（jQuery）：
$('button').click(function() { $('.bubble').addClass('animate'); }); $('.buuble').click(function() { $(this).removeClass('animate'); $(this).addClass('ani'); });
你几乎就在我亲爱的朋友那里。 在我的Chrome浏览器上检查这支笔，就像一个魅力。
但是，我建议您在处理CSS Transitions和Transformations时深入研究Vendor特定的CSS属性 。
以下是一些肯定适合您的链接：
跨浏览器转换： https ： //css-tricks.com/almanac/properties/t/transition/
.example { -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; }
跨浏览器转换： https ： //css-tricks.com/almanac/properties/t/transform/
.element { -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; }