Плавное появление блока css при загрузке страницы

2019/01/14 Марат 828 0 #CSS |

Когда вы ищите появление блока, то что именно вы имеете ввиду!? Потому, что появление блока можно понимать по-разному! Мы сегодня рассмотрим три случая появление блока, для это понадобятся живые примеры, как это выглядит и где используется появление блока.

1. Появление и исчезновение блока при нажатии … данный пункт перенесен на следующую страницу...пример оставим как затравку… + он же будет в архиве...

2. Появление блока из-за края монитора, края окна.
3. Постепенное появление блока.
4. Выдвижная панель слева CSS+JS, пример

Внимание! Вариаций на разные темы и в том числе не появление или скрытие блока может быть просто огромным! На этой странице – это всего лишь несколько примеров. Как это может быть реализовано!

Появление блока из-за края монитора, края окна.

2. Появление блока из-за края монитора, края окна.

Как это работает!?

Появление блока с помощью css

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

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

2.1.position: absolute;

div.main .center {

position: absolute;

top: 37%;

left: 0;

right: 0;

text-align: center;

text-transform: uppercase;

z-index: 15;

}

Далее у нас идет блок. Который будет появляться – это заголовок, который появляется слева из позиции left – 100%

Здесь нас интересует, позиция

2.2. position: relative;

Анимация

2.3. animation: showLeft(имя) 1s(время);

Весь код:

div.main .center h1 {

color: #fff;

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

font-weight: 700;

margin-bottom: 30px;

position: relative;

animation: showLeft 1s;

z-index: 1;

}

Задаем начальный и конечный кадр анимации…

2.4. keyframes

@keyframes showLeft {

from {left:-100%;}

to {left:0;}

}

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

@keyframes showRight {

from {right:-100%;}

to {right:0;}

}

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

Для третьего варианта применена абсолютно та же схема, единственное отличие блок будет появляться не двигаясь, т.е. от невидимого состояния в видимое…

Здесь по-моему и объяснять нечего…

.container { animation: show 2s;

}

@keyframes show {

from {opacity: 0;} to {opacity: 1;}

}

Вас может еще заинтересовать список тем : #CSS |

Последняя дата редактирования : 2020-02-06 08:12

Название скрипта :Появление блока CSS

Скрипт № 41.1

Пример

Ссылка на скачивение: Все скрипты на одной странице