Как сделать плавное появление блока CSS?

Как сделать плавное появление блока CSS?

Приветствую вас, дорогие друзья!

В этой статье хочу вам показать два, очень интересных приема работы с CSS3, которые дают возможность сделать плавное появление блока CSS свойствами. Используя данную возможность можно сделать достаточно много интересных вещей для своего сайта. Например, мы можем сделать плавное появление элемента при наведении на какой-либо элемент на странице, или показать элемент через определенный интервал времени не используя при этом никаких скриптов!

Плавное появление блока CSS при наведении

В ситуации, когда нам нужно показать блок при наведении, мы должны сделать следующее:

  1. 1.Создаем блок, который будет плавно появляться на странице, и блок, который будет по умолчанию скрыт:
  2. 2. Задаем стили оформления:

    Скрытый блок делаем полностью прозрачным (opacity:0;), и задаем ему скорость перехода между состояниями элемента (transition: 1s;), в моем случае равное 1 секунде.

  3. 3.А теперь, для того, чтобы сделать плавное появление блока CSS нужно сделать следующее:

Селектор .on-hover:hover+ .hidden-block означает, что при наведении на элемент с классом .on-hover будут применены свойства для элемента .hidden-block. В данном случае мы делаем этот элемент видимым, то есть меняем прозрачность (opacity:1;).

Так как блок .hidden-block не находится внутри .on-hover, то я использую hover с +. В случае если у вас скрытый элемент находится внутри элемента, на который нужно навести указатель мышки, то вам нужно использовать вот такой селектор:
.on-hover:hover .hidden-block

Вот что у нас получилось:

Видимый
Скрытый

Плавное появление блока CSS с задержкой по времени

Второй вариант реализации плавного появления блока с помощью CSS заключается в использовании правила @keyframes.

Подробно об использовании данного правила вы можете почитать в этой статье:
Создаём CSS-анимацию без плагинов

В случае если нам нужно показать элемент с некоторой задержкой, мы должны сделать следующее:

  1. 1.Создаем блок, который по умолчанию будет полностью прозрачным:
  2. 2.В CSS, помимо свойств оформления элемента указываем прозрачность и скорость перехода:

    Так же мы задаем свойство animation, в котором произвольно задаем название анимации (show), ее скорость (3 секунды) и количество повторений (1), а для того, что бы после выполнения анимации наш элемент не возвращался к первоначальному состоянию указываем свойство animation-fill-mode со значением forwards.

    Кроме того, задаем дополнительное свойство, которое отвечает за задержку начала анимации (animation-delay) равное 1 секунде.

  3. 3.Задаем при помощи правила @keyframes последовательность, с которой будет появляться наш блок:

Вот, как это работает (нужно обновить страницу):

Плавное появление блока CSS

Как видите анимации, плавного появления блока CSS достаточно просты в использовании, и, я думаю, у вас не должно возникнуть сложностей в их использовании. Если у вас появятся вопросы или замечания, вы можете оставить их в комментариях.


А на этом у меня сегодня все. Обязательно поделитесь статьей в социальных сетях и подпишитесь на мою рассылку.

До встречи в следующих статьях!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

14 комментариев

  1. Спасибо! Статья очень помогла!!!!//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    • Очень рада! Спасибо Вам! :)

  2. Доброго времени суток! Воспользовался Вашим примером, но он не работает на многих мобильных браузерах — текст вообще не появляется. В полнофункциональных браузерах всё отлично работает. Как обойти данную проблему?

  3. Спасибо за статью! Подскажите, если поставить скрываемый блок выше видимого из первого примера, то свойство не работает. С чем может быть проблема?

  4. Здравствуйте! Статья очень интересная, но у меня есть вопрос. Как сделать чтоб анимация начиналась только тогда когда человек доходит до блока с анимацией?

    • Спасибо, Денис! Удачи Вам!

    • Спасибо, Александр!

  5. Спасибищеее! Мне очень пригодилось для проекта!

    • Спасибо, Ирина! Очень рада!

  6. Когда я убираю мышку с элемента то элемент который должен появляться у меня исчезает

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif