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

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

Рассмотрим, как можно реализовать плавное появление блока при наведении с помощью CSS.

Пример HTML структуры. Два блока: первый видимый, при наведении на который будем плавно показывать второй (скрытый) элемент.

i
 
Скрытый элемент

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

.o2t-element--hidden < opacity: 0; visibility: hidden; transition: 0.55s opacity, 0.55s visibility; >.o2t-element:hover~.o2t-element--hidden

Плавность появления и исчезновения работает за счёт добавления transition к свойствам opaciy и visibility

До скрытого элемента мы добрались с помощью родственного селектора ~ (тильда). Также можно было обратиться при помощи соседнего селектора + или дочернего >

Пример с более сложной структурой

Допустим, у нас следующая структура:

i
 
Плавно всплывающий/исчезающий блок при наведении
 

Тогда CSS будет следующий:

.o2t-element:hover + div > .o2t-element--hidden

Таким образом, используя различные селекторы мы можем обратиться к последующим элементам для дальнейшей работы с ними.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Поделиться с друзьями:

Статьи из данной категории:

• JavaScript: Работа с Массивами
• Наличие Динамически Добавленного Элемента
• Стилизация Input File
• Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
• Стилизация Скролла
• События Формы

Плавное появление элемента

У меня есть меню простенькое. Как сделать чтобы при входе на страницу он плавно появлялся.

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

Отслеживать

5,040 2 2 золотых знака 15 15 серебряных знаков 44 44 бронзовых знака

задан 23 апр 2021 в 15:13

Dmitry Chernyak Dmitry Chernyak

375 1 1 золотой знак 3 3 серебряных знака 9 9 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Не нужны здесь никакие лишние скрипты. Вот несколько примеров на CSS:

header < opacity: 0; animation: ani 2.5s forwards; >@keyframes ani < 0% 100% >

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

header < transform: translateX(-150%); animation: ani 1s forwards; >@keyframes ani < 0% 100% >

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

header < transform: translateY(-150%); animation: ani 1s forwards; >@keyframes ani < 0% 100% >

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

header < font-size: 0; animation: ani 2s forwards; >@keyframes ani < 0% 100% >

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

header < position: absolute; overflow: hidden; top: 15px; left: 0; width: 0; text-align: right; white-space: nowrap; animation: ani 1s linear forwards; >@keyframes ani < 0% 100% >

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

header>div header>div:nth-child(1) header>div:nth-child(2) header>div:nth-child(3) header>div:nth-child(4) header>div:nth-child(5) @keyframes ani < 0% 15% 30% 45% 60% 75% 85% 100% >

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

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

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

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

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

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

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

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

Хотите показывать элемент с некоторой задержкой? Тогда действуйте по этой схеме:

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

Чтобы посмотреть результат данных действий, обновите страницу.
Плавное появление блока CSS

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

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

• Входит ли наполнение сайта в стоимость разработки?
• Осуществляет ли Студия ЯЛ техническую поддержку сайтов, сделанных другими подрядчиками?
• Есть ли у Студии ЯЛ бесплатная поддержка для сайтов, которые она разрабатывает?

Как сделать плавное появление блока, и смещение контента ниже, без задания фиксированной высоты?

При наступление события, плавно выезжает блок, и всё что ниже, так же плавно съезжает вниз.

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

• Вопрос задан более двух лет назад
• 369 просмотров

2 комментария

Простой 2 комментария