Весенняя дополнительная информация с запросом аутентификации [дубликат]

После того, как принятый ответ Гильермо был написан, переход CSS-перехода от 3 апреля 2012 года изменил поведение перехода видимости, и теперь можно решить эту проблему короче, без использования задержки перехода:

.myclass > div { 
                   transition:visibility 1s, opacity 1s; 
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div 
               {   visibility:visible; opacity:1 }

Время выполнения, указанное для обоих переходов, должно быть, как правило, одинаковым (хотя немного более длительное время для видимости не является проблемой). Для текущей версии см. Мой блог http://www.taccgl.org/blog/css-transition-visibility.html#visibility-opacity .

W.r.t. название вопроса «Переходы на дисплее: свойство» и в ответ на комментарии Rui Marques и josh к принятому ответу: это решение работает в тех случаях, когда это не имеет значения, если свойство отображения или видимости (как это, вероятно, имело место в этом вопросе). Он не будет полностью удалять элемент как отображение: none, просто сделать его невидимым, но он все еще остается в потоке документа и влияет на положение следующих элементов. Переходы, которые полностью удаляют элемент, похожий на отображение: ни один не может быть выполнен с использованием высоты (как указано другими ответами и комментариями), максимальной высотой или краем-сверху / снизу, но также см. . Как я могу перейти на высоту: 0 ; высота: авто; используя CSS? и мой блог http://www.taccgl.org/blog/css_transition_display.html .

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