ChromeでCSSトランジションが正常に動作しない

Question

ChromeでCSSの移行が正常に動作しません。 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

あなたはほとんどそこに私の親愛なる友人です。私の信じられないほどの魅力のような作品です。

ベンダー固有の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; 
    } 

ここ

は間違いなくあなたのために動作しますいくつかのリンクです