CSS过渡不会在Chrome

Question

正常工作，我的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'); 
}); 

Answer 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; 
    }