Плавное появление блока 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

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

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

Источник

Плавное появление блоков на чистом CSS

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

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

Чтобы создать эффект анимации для объектов, то здесь нужно выполнить следующие шаги. Это прописать код и под него стили, ведь все исполнено на чистом CSS.

/*=== Основные стайлинга ===*/
.peremes-hcheniya <
background: #1488b3;
width: 115px;
height: 85px;
padding: 18px;
text-align: center;
color: #fff5f5;
border-radius: 3px;
float: left;
margin: 3px;
font-size: 14px;
font-family: ‘Arial’;
text-transform: uppercase;
>

/*=== Спусковой крючок ===*/
.atransomas <
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
>

/*=== Необязательные задержки, измените значения здесь ===*/
.one <
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
>

.two <
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
>

.three <
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
animation-delay: 2.3s;
>

.four <
-webkit-animation-delay: 3.3s;
-moz-animation-delay: 3.3s;
animation-delay: 3.3s;
>

/*=== Animations start here ===*/
/*=== FADE IN ===*/
@-webkit-keyframes dvizheniya <
from <
opacity: 0;
>

to <
opacity: 1;
>
>
@keyframes dvizheniya <
from <
opacity: 0;
>

.dvizheniya <
-webkit-animation-name: dvizheniya;
animation-name: dvizheniya;
>

/*=== FADE IN DOWN ===*/
@-webkit-keyframes dvizheniyaDown <
from <
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
>

to <
opacity: 1;
-webkit-transform: none;
transform: none;
>
>
@keyframes dvizheniyaDown <
from <
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
>

to <
opacity: 1;
-webkit-transform: none;
transform: none;
>
>

.dvizheniyaDown <
-webkit-animation-name: dvizheniyaDown;
animation-name: dvizheniyaDown;
>

/*==== FADE IN UP ===*/
@-webkit-keyframes dvizheniyaUp <
from <
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
>

to <
opacity: 1;
-webkit-transform: none;
transform: none;
>
>
@keyframes dvizheniyaUp <
from <
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
>

to <
opacity: 1;
-webkit-transform: none;
transform: none;
>
>

.dvizheniyaUp <
-webkit-animation-name: dvizheniyaUp;
animation-name: dvizheniyaUp;
>

/*=== FADE IN LEFT ===*/
@-webkit-keyframes dvizheniyaLeft <
from <
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
>

to <
opacity: 1;
-webkit-transform: none;
transform: none;
>
>
@keyframes dvizheniyaLeft <
from <
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
>

to <
opacity: 1;
-webkit-transform: none;
transform: none;
>
>

.dvizheniyaLeft <
-webkit-animation-name: dvizheniyaLeft;
animation-name: dvizheniyaLeft;
>

/*==== FADE IN RIGHT ===*/
@-webkit-keyframes dvizheniyaRight <
from <
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
>

to <
opacity: 1;
-webkit-transform: none;
transform: none;
>
>
@keyframes dvizheniyaRight <
from <
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
>

to <
opacity: 1;
-webkit-transform: none;
transform: none;
>
>

.dvizheniyaRight <
-webkit-animation-name: dvizheniyaRight;
animation-name: dvizheniyaRight;
>

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

Источник

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

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

Навигация по статье:

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

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

1. Создаем блок, который будет плавно появляться на странице, и блок, который будет по умолчанию скрыт:

Селектор .on-hover:hover+ .hidden-block означает, что при наведении на элемент с классом .on-hover будут применены свойства для элемента .hidden-block. В данном случае мы делаем этот элемент видимым, то есть меняем прозрачность (opacity:1;).

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

Плавное появление блока CSS с задержкой по времени

Второй вариант реализации плавного появления блока с помощью CSS заключается в использовании правила @keyframes.

Подробно об использовании данного правила вы можете почитать в этой статье:
Создаём CSS-анимацию без плагинов

В случае если нам нужно показать элемент с некоторой задержкой, мы должны сделать следующее:

1. Создаем блок, который по умолчанию будет полностью прозрачным:

Источник

Несколько неочевидных frontend-хитростей

Под катом вы узнаете о том, как быстро и легко оформить взаимодействие с SVG-иконками, добавить плавный скролл с помощью одного CSS-правила, анимировать появление новых элементов на странице, переносить текст на новую строку с помощью CSS и о новых способах оформления декоративной линии текста.

Оформление декоративной линии текста (text-decoration-style, text-decoration-color)

В Firefox и Safari уже довольно давно появились дополнительные возможности для оформления декоративной линии, которая добавляется к тексту с помощью свойства text-decoration.

К примеру, можно задавать свойству text-decoration сразу несколько значений (причем это работает уже очень давно):

Можно задавать цвет для оформления текста:

А также стиль линии:

Учтите, что в данный момент работают новые свойства только в Firefox и, частично, в Safari. Посмотреть рабочий пример можно здесь

Плавная прокрутка страницы на CSS (scroll-behaviour)

Малоподдерживаемое, но очень полезное свойство scroll-behaviour позволит нам одной строкой сделать скролл на странице плавным. Работает как при прокрутке в нужное место при переходе по якорям, так и при прокрутке страницы JS-ом.

• smooth — плавная прокрутка;
• instant — мгновенная прокрутка;
• auto — на усмотрение браузера.

Если плавная прокрутка страницы на вашем сайте не является чем-то критичным, смело используйте это свойство. Вы получите плавный скролл при переходе по якорям с помощью всего одного CSS-правила как минимум, в Firefox .
Пример

Анимация появления элемента (быстро и легко)

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

Как это часто делали раньше:
1) на сервер посылаетcя запрос;
2) после загрузки ответа данные добавляются в скрытый на странице блок;
3) блоку присваивается класс, в котором прописана анимация его появление (либо (о, ужас!) блок анимируется JS-ом).

Так вот, последний пункт можно считать избыточным, ведь у нас есть старое доброе CSS-свойство animation. По умолчанию анимация срабатывает при загрузке страницы либо при изменении DOM-дерева (а именно при добавлении элементу класса с анимацией или самого элемента). Поэтому, важно не хранить незаполненные блоки в DOM, а добавлять их динамически в контейнеры по мере загрузки.

@keyframes fade-in < 0% < opacity: 0; >100% < opacity: 1; >> .content

• Прописав @keyframes один раз, можно использовать их в любом месте CSS для добавления типовой анимации всем нужным элементам;
• Обращения к DOM в JS будут сведены к минимуму, что при большом количестве элементов или итераций поможет снизить нагрузку на страницу.

Изучить рабочий пример можно здесь.

Разрыв строки на CSS

Если в определенном месте на странице вам нужно добавить перенос строки, а в HTML лезть не хочется (или невозможно), на помощь придет CSS. Первое, что приходит в голову — добавить псевдоэлемент с тегом
внутри:

К сожалению (а может, и к счастью), добавлять теги в псевдоэлементы, нельзя. Но выход есть!

SVG с интерактивными элементами

Если вам когда-нибудь приходилось оформлять взаимодействие с SVG-элементами, вы знаете, что сделать это не так-то просто. Чтобы обращаться в CSS к отдельным SVG-элементам, приходится добавлять на страницу не тег , а код всего SVG-изображения целиком. Это делает HTML-код ужасно громоздким. В результате нам приходится жертвовать размером страницы и лаконичностью кода ради визуальных эффектов.