Как правильно оформить переходы CSS?

Question

[Павел]

Здравствуйте

Изучаю верстку.

Почему, если переместить описание перехода в HOVER, то при перемещении указателя вне figure не происходит обратная анимация?

Я думал, что от перестановки эффект не поменяется

.gallery figcaption {
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background-color: rgb(153,153,153);
background-color: rgba(153,153,153,.9);
padding: 20px;
font-family: Titillium, Arial, sans-serif;
font-weight: 400;
font-size: .9em;
color: white;
opacity: 0;
-webkit-transition: opacity .75s ease-out;
-moz-transition: opacity .75s ease-out;
-o-transition: opacity .75s ease-out;
transition: opacity .75s ease-out;

}
figure:hover figcaption {
opacity: 1;

}

Спасибо

Answer 1

[Анна Бакурова]

событие ховер срабатывает только при наведении мыши на объект и когда вы "выходите" с объекта то стили для ховера мгновенно убираются и анимации не происходит. То что вы сейчас прописали верно.
Смотрите что происходит при transition на ховере
1) Вы наводите мышь на объект и у него появляются стиля для hover далее браузер видит "у меня появилось свойство transition нужно его применить" и применяет.
2) Вы убираете мышь с объекта и браузер убирает стили с hover при этом и убирает transition (он не выполняется)
Смотрите что происходит при transition не на ховере
1) браузер загружает стили и видит transition и при каждом изменении opacity он будет выполняться вне зависимость от того при каком событии идёт изменение.
2) когда например вы убираете мышь с объекта сначала уходят ховер свойства а только потом transition их анимирует! - это не происходит в событии ховер

Comments

[Анна Бакурова]

кстати на будущее если у нас будет блок сначала со свойством display none и opacity 0 а при ховере вы захотите сделать display block и opacity 1 с транзишином не прокатит так как у нас объект изначально был display none. Это так к слову

[Павел]

Спасибо! Вроде понял, а вроде не очень. Но я верстку все равно для общего развития учил :)

Как бы получается, то в нормальном состоянии у нас есть opacity: 0 и у этого стиля есть переход. И при возвращении из любого стиля где opacity не 0 к нормальному состоянию будет происходить переход.

А с ховером получается, что то состояние, к которому мы возвращаемся после него не содержит перехода. Поэтому все происходит быстро. Хотя странно, ведь "откуда" мы идем содержит анимацию. :)

[Анна Бакурова]

@Pasha4ur да но то откуда мы идём исчезает и стили его стираются, а в норме (как сейчас) обратная анимация происходит ПОСЛЕ ховера - оно как бы сглаживает переход ОТ ховера к нормальному состоянию. А так то Вы всё правильно поняли

[Павел]

Понял. Спасибо

Answer 2

[Роман Мисюра]

Поставьте транзишен в блок к которому хотите его применить а также в :hover. Т.е. анимация будет срабативать при наведении а также, когда курсор уходит от "блока".

Comments

[Анна Бакурова]

в этом нет необходимости

[Павел]

она и сейчас так срабатывает