Как сделать обратную анимацию?

Question

[WQP]

Здравствуйте, как сделать так, чтобы анимация работала при "убирания" мишки с блока?
jsfiddle.net/Zvyxd/97

Answer 1

[varzin]

Как вариант можно анимировать свойства CSS через transition

jsfiddle.net/varzin/9woqt7pn/1

Comments

[Андрей Федоров]

а можно как нибудь сделать, чтобы появлялась клику и оставалась. а по второму клику возвращалась на исходную? только css.
codepen.io/aliencash/pen/jPVxWK
кликать на картинки.

[varzin]

Андрей Федоров: чтобы как-то зафиксировать состояние блока, придется прибегнуть к JS. Можно, например, сделать отдельный класс (назовем его .active) и прописать в нем измененное состояние (что в первом примере было в :hover).

При первом нажатии присваивать блоку класс .active, а при повторном убирать.

[varzin]

Андрей Федоров: Я обновил для вас пример с подключенным jQuery (чтобы код был нагляднее) jsfiddle.net/varzin/9woqt7pn/4

[Андрей Федоров]

да вот хотелось бы обойтись без js и тем более jq. но видимо никак такое не сделать... тем не менее спасибо.

Answer 2

[Николай Шабалин]

Какой нахер "мишки"? Я там мишку искал, ты меня обманул, помогать я тебе не буду.

Answer 3

[Дмитрий Шинкарь]

Я конечно могу ошибаться, но одними средствами css тут уже не обойдешься... =)