Что сделать чтобы поведение css было одинаковое во всех браузерах?

Question

[vasIvas]

Есть кнопка, которая при наезде на неё курсора плавно появляется и плавно исчезает.
В FireFox работает нормально, но в Chrome поведение меняется. Что сделать, чтобы этого
избежать? Если это поможет, то использую sass и gulp. Браузеры последних версий.

Вот код на который грешу, ну и другого почти и нет -

.container-mouseleave {
	opacity: 0.2;

	transition: opacity 0.3s, visibility 0.3s;
}

.container-mouseenter {
	opacity: 0.5;

	transition: opacity 0.3s, visibility 0.3s;
}

Answer 1

[Виталий Инчин ☢]

Используйте для каждого браузера свой вариант:

-webkit-transition: all 0.1s //Это Chrome, Opera и прочие
-moz-transition: 0.2s.... //Mozilla
-ms-transition //IE

Вендорные свойства, если что

Comments

[MaoCzedun]

дело еще в том , что поддерживаемость свойст зависит от самой версии браузера

[Виталий Инчин ☢]

MaoCzedun: ну так либо будет анимация как надо, либо ее не будет вообще.

Answer 2

[Дима Паутов]

Я может чего уже подзабыл, но как вы свойство visibility анимировать собрались?
По той же причине вы не сможете анимировать свойство display из значения none в, например block!

Comments

[Дима Паутов]

Лев Солнцев: Я вам больше скажу, оно не анимируется!

[vasIvas]

Лев Солнцев: а как сделать тоже самое через задержку? У меня эффект появления. При наезде курсора кнопка становится менее прозрачной и наоборот. И все это плавно делается. В FF работает замечательно. А префикс для гугла ничего не поменял.

[Дима Паутов]

Оставьте так transition: opacity 0.3s; и все! У меня всегда работало нормально, у вас должно иначе?

Answer 3

[Mikhail Osher]

Если это поможет, то использую sass и gulp

gulp-autoprefixer

Answer 4

[MaoCzedun]

делать кроссбраузерность , браузеры по разному могут поддерживать разные правила стилей

Comments

[vasIvas]

а как делать?