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

Владимир Ливерко Руководитель отдела разработки
Владимир Ливерко
Руководитель отдела разработки

Существует несколько способов. Зная определённые принципы работы с CSS3, можно реализовать плавное появление блока CSS свойствами, тем самым воплотив в жизнь массу креативных идей для сайта. Как вариант – сделать плавное появление элемента, возникающее после наведения указателя мышки на какой-либо элемент на странице. Другой пример – демонстрация элемента спустя заданный временной промежуток без использования скриптов.

Сначала давайте рассмотрим вариант плавного появления блока CSS с помощью свойств при наведении. Нам предстоит сделать следующие шаги.

  1. Создаем два блока: один будет видимым и будет плавно возникать на странице, другой – будет скрытым.
    1 ППБ.docx
  2. Заполним стили оформления.
    2 ППБ
    Для скрытого блока указываем полную прозрачность, а также прописываем для него скорость перехода между состояниями элемента. Для этого нам нужны теги opacity:0 и transition: 2 s. Обратите внимание, скорость перехода состояния элемента мы задали 2 секунды.
  3. Далее – самый важный шаг. Используя селектор .on-hover:hover+ .hidden-block, мы делаем так, чтобы при наведении на элемент с классом .on-hover будут применены свойства для элемента .hidden-block. Элемент становится видимым, так как мы изменяем и прозрачность.
    3 ППБ

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

Любуемся результатом.

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

Теперь перейдём к плавному появление блока с помощью CSS с временной задержкой через использование правила @keyframes.

Хотите показывать элемент с некоторой задержкой? Тогда действуйте по этой схеме:
  1. Создайте прозрачный по умолчанию блок.
    4 ППБ
  2. Пропишите свойства оформления элемента, прозрачность и скорость перехода.
    5 ППБ
    Задайте свойство animation, в котором пропишите название анимации (show), её скорость (2 секунды) и число повторений (1). Указывая свойство animation-fill-mode со значением forwards, вы не допустите того, чтобы после выполнения анимации элемент принял первоначальное состояние. Он сохранит новый вид.
    Также зададим дополнительное свойство, которое отсрочит запуск анимации на 2 секунды (animation-delay).
  3. Через правило @keyframes, задаём последовательность, с которой будет появляться блок.
    6 ППБ
Чтобы посмотреть результат данных действий, обновите страницу.
Плавное появление блока CSS

Думаем, после изучения нашей пошаговой инструкции, у вас не будет трудностей с настройкой анимации плавного появления блока CSS. Но если вдруг возникли дополнительные вопросы или комментарии, вы можете написать нам с помощью формы обратной связи. Оставляйте свои сообщения – будем рады ответить на них!

Еще ответы по теме:

Наши работы

  • Стар Текс
    Магазин текстиля
    Стар Текс
  • Обновление
    Производственная фармацевтическая компания
    Обновление
  • Сибирский Молл
    Торгово-развлекательный центр
    Сибирский Молл

Вернуться в раздел
Комментарии
Оставьте свой комментарий