Как правильно работает функция transition?

Question

[Имя Имечко]

Как правильно работает функция transition?

Пишу код и у меня в хроме при перезагрузке страницы меню начинается двигаться.

.transition {
	transition-duration: 0.50s;
	-webkit-transition-duration: 0.50s;
	-o-transition-duration: 0.50s;
	-moz-transition-duration: 0.50s;
}

В мозиле работает исправно.

Answer 1

[GreatRash]

Ну а почему меню не должно двигаться то? Вы ему сказали: "двигайся", оно и движется.

Comments

[Имя Имечко]

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

[GreatRash]

Саня: Ну дык вы в CSS уточните, что вам нужно менять только фон, а не всё подряд. Опять же где у вас в CSS написано, что нужно при наведении? Читайте мануал - webref.ru/css/transition

[Имя Имечко]

На словах это не описать. Вот видео, что происходит.
Браузер хром версия 42.0.2311.135.

youtu.be/rwS3rnMJX5Y

[GreatRash]

Саня: 360p вы серьёзно?

Сделайте тут пример: codepen.io/pen

[Имя Имечко]

720p включите...

[GreatRash]

Саня: Да что ж такое то :)

.transition:hover {
-webkit-transition: background-color .5s;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
transition: background-color .5s;
}

Вот так будет меняться только свойство background-color и только при наведении на элемент.

[Имя Имечко]

GreatRash: В принципе получилось, но эффект плавной смены цвета срабатывает лишь тогда, когда наводишь курсор. Как только убираешь курсор, то эффект мгновенный.

[GreatRash]

Саня: codepen.io/anon/pen/vOGMjz

[Имя Имечко]

GreatRash: Заработало! Сердечно благодарен ))

Answer 2

[Андрей Чернышев]

Если я не ошибаюсь, вы включили транзишн, но не указали для какого свойства его задействовать.

selector {
 transition-property: width;
 transition-duration: .50s;
}

Ну или по старинке:

selector {
 transition: width .50s;
}

Comments

[Евгений Петров]

Без указания имени принимается значение all.
transition-duration: .5s;
равносильно
transition: all easy .5s 0s;

Answer 3

[Имя Имечко]

youtu.be/rwS3rnMJX5Y