CSS 过渡在 Chrome 中无法正常工作答案

【问题标题】：CSS transition doesn't work properly in ChromeCSS 过渡在 Chrome 中无法正常工作
【发布时间】：2017-01-04 18:36:55
【问题描述】：

我的 CSS 过渡在 Chrome 中无法正常工作。它在 Chrome 中会产生模糊效果，但在 Firefox 中效果很好。

这里是圆形动画的code snippet。我建议在 Chrome 中以屏幕的最大宽度查看此内容。

这是 HTML：

<button>Inflate!</button>
<div class='bubble'></div>

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');
});

【问题讨论】：

标签： jquery css google-chrome transform

【解决方案1】：

亲爱的朋友，你快到了。在我的 Chrome 版本上检查了这支笔，效果很好。

但是，我建议您在处理 CSS 过渡和转换时深入了解供应商特定的 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;
    }

【讨论】：