Проблема с transition opacity

[oke11o]

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

Верстаю такую страницу. 

Хочу сделать красивое появление и затухание при помощи transition для иконки у блока раскрывающихся новостей. http://prntscr.com/3lqfvi

Имею такой css:

          i {            opacity: 0;            -webkit-transition: opacity @durationStd ease-in-out;            -moz-transition: opacity @durationStd ease-in-out;            -ms-transition: opacity @durationStd ease-in-out;            -o-transition: opacity @durationStd ease-in-out;            transition: opacity @durationStd ease-in-out;          }

И появление происходит как надо (плавно). Но вот при закрытие затухания не происходит, а просто изменяется свойство и элемент мигом исчезает.

 

Подскажите в чем может быть проблема.

[amelice]

Основные свойства нужно писать элементу, анимация это изменение визуального состояния, то есть одно состояние меняется на другое, когда происходит какие то факторы. В вашем случае элемент существует при одном состоянии, а в другом его нету.

нужно так:

.news-row .news-list .item .news-item-body h3 i {opacity: 0;-webkit-transition: opacity .2s ease-in-out;-moz-transition: opacity .2s ease-in-out;-ms-transition: opacity .2s ease-in-out;-o-transition: opacity .2s ease-in-out;transition: opacity 1s ease-in-out;display: inline-block;background: url(../images/ivv.png) no-repeat 0 0;width: 20px;height: 20px;margin-top: -11px;margin-left: 10px;margin-bottom: -5px;}

.news-row .news-list .item.active .news-item-body h3 i {opacity: 1;}

Свойства проверьте, я для отладки могла изменить какие то.

Edited May 23, 2014 by amelice

[oke11o]

ААА. 

Спасибо, Все работает))