Переход 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; 
    }