1

Есть самая наипростейшая анимация:

@-webkit-keyframes port {
    from {opacity: 0;}
    to {opacity: 1;}
}
.port:hover .port_inf {-webkit-animation:port 1s;}

Когда мы наводим на .port у нас плавно появляется .port_inf, но когда мы курсор отводим, то блок резко исчезает. А надо сделать, чтобы он также плавно исчезал. Как это сделать?

Заранее спасибо!

1
  • ну и еще проблема в том, что после выполнения анимации блок исчезает
    – acidernt
    3 дек 2012 в 20:23

1 ответ 1

2

Я бы использовал вот это, тем более кроссбраузерно, а у вас нет:

.port .port_inf {
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.port:hover .port_inf {
    opacity: 1;
}
3
  • Свойства с префиксами должны идти раньше беспрефиксных. И да. Забыли -ms- и -o-. 3 дек 2012 в 20:57
  • @ReklatsMasters кстати почему? Я всегда конечно и ставлю в начале с префиксами, но делаю просто "как все"
    – acidernt
    3 дек 2012 в 20:59
  • 1
    @inferus-vv: Потому что браузер принимает во внимание последний указанный элемент, который он знает. Префиксы делают, когда фича ещё недостаточно хорошо работает, или экспериментальна. Когда браузер поддерживает обе, и префиксную, и безпрефиксную, они могут иметь разные реализации, и если префиксную указать позже, то будет использоваться именно та, которая потенциально ещё не слишком доработанная.
    – pirj
    4 дек 2012 в 8:35

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.