Переход CSS не работает в chrome, работает коротко при переключении свойства

Question

У меня есть следующие анимации css, которые работают так, как я хочу, на сафари, но не на хром. square0 - это div, который меняет цвет при зависании, медленно исчезает до исходного цвета после перемещения мыши. В Chrome, div немедленно гаснет, если не зависнет.

Я рассмотрел этот вопрос, CSS3 Transition not working in Chrome anymore, и добавил поле фона. Это ничего не меняет, но когда я проверяю страницу в хроме и переключаю это поле (вкл. Или выкл., Это не имеет значения), анимация работает правильно только на несколько секунд.

Я не уверен, что может вызвать это, но любая помощь будет оценена по достоинству.

.square0 { 
    height: 150px; 
    width: 150px; 
    float: left; 
    background-color: white; 
    -moz-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05); 
    -o-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05); 
    -ms-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05); 
    transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05); 
} 

.square0:hover { 
    background-color: rgb(178, 49, 108); 
} 

Answer 1

Ваш код работал со мной без проблем. Проверьте фрагмент в браузере Chrome.

.square0 { 
 
height: 150px; 
 
width: 150px; 
 
float: left; 
 
background-color: #eee; 
 
-moz-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05); 
 
-o-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05); 
 
-ms-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05); 
 
transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05); 
 
} 
 
.square0:hover { 
 
background-color: rgb(178, 49, 108); 
 
}

<div class="square0"></div>