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

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

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

 Пункт 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

Рассмотрим способ решения проблемы сворачивания и разворачивания блока неизвестной высоты на чистом CSS. Это распространённая задача, которая часто вызывает трудности в реализации, когда значение свойства «height» не задано явно, а находится в состоянии «auto».

Для начала посмотрите как работает решение на практике:

Принцип работы

Обычная реализация подразумевает знание начальной и конечной высоты блока. Чтобы обойти это ограничение, будем использовать свойство «max-height». Для свёрнутого значения оно будет нулевым, а для открытого — максимально большим. В нашем случае точно хватит 1000 пикселей.

Стиль блока в раскрытом состоянии:

.expansion-body

Свёрнутое состояние будет происходить за счёт добавления класса «expansion-hide».

.expansion-hide

В развёрнутом виде у «DIV» будет класс «expansion-body».
В свёрнутом — «expansion-body expansion-hide».

Плавное сворачивание и разворачивание достигается с помощью нелинейной трансформации максимальной высоты. Значение от 1000 до 0 меняется сначала очень быстро, а потом резко замедляется. Это сглаживает анимацию, если высота блока намного меньше 1000 пикселей. При обычной линейной трансформации при сворачивании была бы задержка.

Описанный способ легко адаптируется для плавного изменения ширины путём применения свойства «max-width».

Добавление класса и возможные проблемы

Для добавления и удаления класса «expansion-hide» в примере использовался чистый JS. Он не влияет на сам процесс анимации. В обработчике «onclick» всего одна строка кода.

document.getElementById('expansion-body').classList.toggle('expansion-hide')

Сама html-разметка также проста:

Небольшое предупреждение — не добавляйте к блоку отступы «padding», иначе он не будет до конца закрываться. Если они нужны, то создайте внутри ещё один «div» и добавляйте произвольные стили к нему.

PS Чтобы поблагодарить за решение напишите любой комментарий.

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

ЗаголовокDwweb.ru

У нас есть основной блок. Который с позиционирован абсолютно(position: absolute;), вы его положения видите после загрузки страницы.

Нас прежде всего интересует:

Механизм работы плавно появляющегося блока:

У нас есть два блока( «h1» и «.begin»), для них будут прописаны свойство появление слева.

И блок между ними, который будет поваляться слева это абзац «

«.

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

Для блоков справа :

position: relative;
animation: showLeft(имя) 1s(время);

keyframes для левого блока:

keyframes для правого го блока:

Соберем весь CSS:

div.main .center h1

font-size: calc(16px + 1.2vw);

animation: showLeft 1s;

Про остальные стили не вижу никакого смысла писать.

Результат плавного появления блока на примере + скачать

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

Давайте сразу приведем пару ссылок, что будем делать и где скачать:

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

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

Убираем все отступы наружные и внутренние :

Скроем колесо прокрутки, если она вдруг появится.

Позиционируем, растягиваем, заполняем.

#img <
position: absolute;
background: url(onload.jpg) center no-repeat;
width: 100%;
height: 100%;
background-size: cover;
/*Устанавливаем время и имя анимации*/
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
>

Добавляем keyframes, от полной невидимости(opacity: 0;) до полной видимости(opacity: 1;)

@-webkit-keyframes fadeIn <
0%
100%
>
@keyframes fadeIn <
0%
100%
>

Не забываем по блок, который будет у нас появляться

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

Локальное плавное появление блока.

Если вам нужен простой код плавного появления блока, то следующий пункт про такой блок.