Появление блока снизу вверх css

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

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

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

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

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

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

«.

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

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

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

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

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

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

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

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

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

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

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

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

#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;)

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

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

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

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

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

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

Здесь по-моему и объяснять нечего… код намного меньше и проще!

Источник

Как сделать появление снизу вверх?

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

/* Меню */ .menu a < float: left; display: block; padding: 10px 15px;z-index: 20000; >.drop-down a < float: left; min-width: 190px; text-decoration: none; color: white; height: 27px; padding-top: 3px; z-index: 20000; >.drop-down-menu < float: left; display: block;height: 36px;float: right;z-index: 20000; >.menu-title < background: url("/Bar/menu-lines.png") no-repeat 9.5px 5px; background-size: 25px; width: 25px; height: 25px; >.menu-title:hover < background: url("/Bar/menu-lines.png") no-repeat #d7b257 9.5px 5px; background-size: 25px; cursor: pointer; >.activate < display: none; position: absolute; cursor: pointer; width: 100%; height: 40px; margin: 0 0 0 -15px; opacity: 0; z-index: 20000; >.drop-down < margin: 35px 0px 0px -145px; overflow: hidden; position: absolute; width: 190px; >.drop-down-menu:hover .drop-down < position: block; >/* Skin */ .menu a, .drop-down-menu < >.menu a:hover, .drop-down-menu:hover < >.drop-down a < background: black; >.drop-down a:hover < background: #d7b257; >.first < border-top-left-radius: 3px; border-bottom-left-radius: 3px; >.last < border-top-right-radius: 3px; border-bottom-right-radius: 3px; >.drop-down .last < border-radius: 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; >/* IE */ .ie8 .drop-down-menu:hover .drop-down < display: block; >.ie8 .drop-down < position: absolute; >.drop-down < max-height: 0; >.ie8 .drop-down-menu:hover .drop-down < max-height: 400px; >.drop-down-menu:hover .drop-down < max-height: 400px; >.drop-down < max-height: 0; overflow: hidden; >.ie8 .drop-down-menu:hover .drop-down < max-height: 400px; >@media only screen and (min-width: 800px) < .drop-down-menu:hover .drop-down < max-height: 400px; >> @media only screen and (max-width: 799px) < .activate:checked ~ .drop-down < max-height: 400px; >> .drop-down, .menu a, .drop-down-menu < -webkit-transform: translateZ(0); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; >/* */