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

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

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

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

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

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

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

Плавное появление блока 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
Стилизация Скролла
События Формы

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

Не нужны здесь никакие лишние скрипты. Вот несколько примеров на 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

Отслеживать
ответ дан 23 апр 2021 в 18:32
Sevastopol’ Sevastopol’
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака

Божественно 🙂 Тот момент, когда нужно положить тему в закладки, чтобы очередной раз не бегать по мануалам. Респект.

23 апр 2021 в 19:33
Вот именно, две строчки, которые вовремя забываются)
23 апр 2021 в 20:08
@Sevastopol Большое спасибо)
24 апр 2021 в 13:08

Например можно удалять класс, вот так:

window.onload = () => document.querySelector('header').classList.remove('hidden');

.hidden < opacity: 0; >header

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

Отслеживать
ответ дан 23 апр 2021 в 15:33
UserTest013 UserTest013
3,746 1 1 золотой знак 9 9 серебряных знаков 17 17 бронзовых знаков

html
css
jquery

Важное на Мете

Связанные

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Анимация псевдоэлементов

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

Псевдоэлементы

С CSS мы можем задать псевдоэлемент используя ::before или ::after . Псевдоэлемент находится внутри вашего элемента, между элементом и любым содержимым. Так как он действует как элемент самостоятельно, то может быть стилизованым, позиционируемым и многое другое. Код выглядит приблизительно вот так:

.pebble::before < . >.pebble::after

На этой стадии наш элемент .pebble имеет два присоединенных виртуальных элемента и мы можем стилизовать их по мере необходимости.

Читать:

Как распечатать с 2 сторон на принтере

Обратите внимание на «::» вместо «:»

Обычно мы используем двойное двоеточие :: для обозначения псевдоэлементов (в отличие от псевдоклассов, как :hover, :first-child). Если хотите поддержку IE8, то лучше заменить на одиночный : . Другие браузеры и новые версии IE поддержуют двойные.

Не забудьте о «content»

При добавлении псевдоэлементов, одну вещь всегда необходимо иметь в виду — указать свойство content , прежде чем они станут видимыми на странице. Так как псевдоэлемент создается в состоянии контента, то мы можем обмануть его появление с помощью пустого содержимого, например, так:

.pebble::before

Это дает убедиться, что элемент виден на экране.

Например: блестящая кнопка

В этом примере мы используем псевдоэлемент для создания эффекта сияния при наведении мыши на кнопку. Вот пример этого в действии (наведите или нажмите, чтобы увидеть эффект).

Для начала немного HTML:

С момента использования псевдоэлементов нам не нужно больше HTML, чем то что есть, чтобы получить движение. Вы можете захотеть добавить класс к кнопке, если стилизовать необходимо более одного типа на странице, но сейчас мы будем использовать общий элемент для упрощения.

Добавляем эффект блеска

Эффект яркого блеска представляет собой линейный градиент, который проходит через кнопку. Чтобы создать это мы используем псевдоэлемент after и первоначальное положение будет вне кнопки:

button::after

Эффект блеска состоит из градиента от цвета кнопки до белого и обратно. На данном этапе эффект находится за пределами кнопки.

Нам нужно скрыть слой с блеском так, чтобы он показывался только при наведении курсора мыши. Для этого используем свойство overflow со значением hidden . Поскольку псевдоэлемент находится внутри кнопки, это означает, что это позиционирование вне ее предела и его не будет видно.

button

Я поместил некоторые другие стили кнопке, что придаст ей собственный вид. Единственное, что следует отметить, то это применение position: relative . Я добавил это свойство для абсолютного позиционирования псевдоэлемента и это будет находиться внутри кнопки. Указания позиции: абсолютно размещенный элемент будет находиться в пределах родительского элемента.

Добавление анимации

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

Добавляем состояние при наведении курсора мыши путем наложения after на hover :

Здесь мы говорим браузеру, что при наведении мышки, псевдоэлемент after будет animation . Имя анимации «sheen», продолжается 1 секунду и прекратится в конце без повторения.

Последовательность имеет значение здесь. Если использовать ::after:hover ,то это не будет работать при наведении курсора мыши, так как это будет говорить браузеру реагировать на самого псевдоэлемента.

Я также добавил состояние в фокусе. Это означает, что посетитель при табуляции через страницу сможет увидеть эффект блеска без необходимости наведения курсора мыши. (Спасибо, Šime Vidas, за подсказку)

Давайте установим keyframes для анимации:

@keyframes sheen < 100% < transform: rotateZ(60deg) translate(1em, -9em); >>

Нам нужен лишь один ключевой кадр в этом примере. Начиная с позиции (0%), это подразумеваемая начальная позиция псевдоэлемента и мы опишем только конечное положение. В этом примере конечная позиция расположена в верхнем правом углу кнопки. Браузер будет анимировать эффект блеска через кнопку для нас.

Браузер

Свойство анимации хорошо поддерживается, как и псевдоэлементы. Хорошой практикой является добавление префиксов -webkit и -moz для keyframes и любых трансформаций.

Make sure to follow on Twitter for all the latest updates!

Translation Info

This article translated by Panda. (See original)

CSS Animation Weekly

The latest tutorials and inspiration every week!