Css плавное появление – Как плавно передвигать блок после появления над ним другого блока на CSS? — Хабр Q&A

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

Приветствую вас, дорогие друзья!

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

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

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

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

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

    <div> Видимый </div> <div> Скрытый </div>

    <div>

    Видимый

    </div>

     

    <div>

    Скрытый

    </div>

  2. 2. Задаем стили оформления:

    .on-hover{ width:300px; background:#176387; color:#fff; font-size:25px; border:3px solid #2BA2DB; padding:20px; margin:auto; margin-bottom:20px; text-align:center; } .hidden-block{ width:300px; background:#176387; color:#fff; font-size:25px; border:3px solid #2BA2DB; padding:20px; margin:auto; text-align:center; opacity:0; /*Элемент полностью прозрачный (невидимый)*/ transition: 1s; /*Скорость перехода состояния элемента*/ }

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    .on-hover{

    width:300px;

    background:#176387;

    color:#fff;

    font-size:25px;

    border:3px solid #2BA2DB;

    padding:20px;

    margin:auto;

    margin-bottom:20px;

    text-align:center;

    }

     

    .hidden-block{

    width:300px;

    background:#176387;

    color:#fff;

    font-size:25px;

    border:3px solid #2BA2DB;

    padding:20px;

    margin:auto;

    text-align:center;

    opacity:0; /*Элемент полностью прозрачный (невидимый)*/

    transition: 1s; /*Скорость перехода состояния элемента*/

    }

    Скрытый блок делаем полностью прозрачным (opacity:0;), и задаем ему скорость перехода между состояниями элемента (transition: 1s;), в моем случае равное 1 секунде.

  3. 3.А теперь, для того, чтобы сделать плавное появление блока CSS нужно сделать следующее:

    .on-hover:hover+ .hidden-block{ opacity:1; transition: 1s; }

    .on-hover:hover+ .hidden-block{

    opacity:1;

    transition: 1s;

    }

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

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

Вот что у нас получилось:

Видимый

Скрытый

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

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

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

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

    <div> Плавное появление блока CSS </div>

    <div>

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

    </div>

  2. 2.В CSS, помимо свойств оформления элемента указываем прозрачность и скорость перехода:

    .anim-show{ width:300px; background:#176387; color:#fff; font-size:25px; border:3px solid #2BA2DB; padding:20px; margin:auto; margin-bottom:20px; text-align:center; opacity:0; /*Элемент полностью прозрачный (невидимый)*/ transition: 1s; /*Скорость перехода состояния элемента*/ animation: show 3s 1; /* Указываем название анимации, её время и количество повторов*/ animation-fill-mode: forwards; /* Чтобы элемент оставался в конечном состоянии анимации */ animation-delay: 1s; /* Задержка перед началом */ }

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    .anim-show{

    width:300px;

    background:#176387;

    color:#fff;

    font-size:25px;

    border:3px solid #2BA2DB;

    padding:20px;

    margin:auto;

    margin-bottom:20px;

    text-align:center;

    opacity:0; /*Элемент полностью прозрачный (невидимый)*/

    transition: 1s; /*Скорость перехода состояния элемента*/

    animation: show 3s 1; /* Указываем название анимации, её время и количество повторов*/

    animation-fill-mode: forwards; /* Чтобы элемент оставался в конечном состоянии анимации */

      animation-delay: 1s; /* Задержка перед началом */

    }

    Так же мы задаем свойство animation, в котором произвольно задаем название анимации (show), ее скорость (3 секунды) и количество повторений (1), а для того, что бы после выполнения анимации наш элемент не возвращался к первоначальному состоянию указываем свойство

    animation-fill-mode со значением forwards.

    Кроме того, задаем дополнительное свойство, которое отвечает за задержку начала анимации (animation-delay) равное 1 секунде.

  3. 3.Задаем при помощи правила @keyframes последовательность, с которой будет появляться наш блок:

    @keyframes show{ 0%{ opacity:0; } 100% { opacity:1; } }

    @keyframes show{

    0%{

    opacity:0;

    }

    100% {

    opacity:1;

    }

    }

Вот, как это работает (нужно обновить страницу):

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

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

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

Плавное появление блока CSS | Only to top

Only to topСолдатов НиколайПлавное появление блока CSS
Рассмотрим, как можно реализовать плавное появление блока при наведении с помощью CSS

Пример HTML структуры. Два блока: первый видимый, при наведении на который будем плавно показывать второй (скрытый) элемент.

<div>i</div>

<div>Скрытый элемент</div>

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

Магия CSS

.o2t-element--hidden {
    opacity: 0;
    visibility: hidden;
    transition: .55s opacity, .55s visibility;
}
.o2t-element:hover ~ .o2t-element--hidden {
    opacity: 1;
    visibility: visible;
}

Плавность появления и исчезновения работает за счёт добавления transition к свойствам opaciy и visibility

До скрытого элемента мы добрались с помощью родственного селектора ~ (тильда). Также можно было обратиться при помощи соседнего селектора + или дочернего >

Пример с более сложной структурой

Допустим, у нас следующая структура

<div>i</div>

<div>
    <div>Плавно всплывающий/исчезающий блок при наведении</div>
</div>

Тогда CSS будет следующий

.o2t-element:hover + div > .o2t-element--hidden {
    opacity: 1;
    visibility: visible;
}

Таким образом, используя различные селекторы мы можем обратиться к последующим элементам для дальнейшей работы с ними.

admin

26/11/2019 14:39

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Несколько неочевидных frontend-хитростей / Wargaming corporate blog / Habr

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



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

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

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

.multiple {
  text-decoration: underline overline;
}

Можно задавать цвет для оформления текста:
.color {
  text-decoration-color: blue;
}

А также стиль линии:
.dashed {
  text-decoration-style: dashed;
}
.dotted {
  text-decoration-style: dotted;
}
.wavy {
  text-decoration-style: wavy;
}

Учтите, что в данный момент работают новые свойства только в Firefox и, частично, в Safari. Посмотреть рабочий пример можно здесь
Плавная прокрутка страницы на CSS (scroll-behaviour)

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

Свойство может принимать 3 основных значения:
  • smooth — плавная прокрутка;
  • instant — мгновенная прокрутка;
  • auto — на усмотрение браузера.

Когда нибудь (надеюсь, совсем скоро) нам не придется больше писать функции для плавной прокрутки на JS или подключать сторонние библиотеки.

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

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

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


Как это часто делали раньше:
1) на сервер посылаетcя запрос;
2) после загрузки ответа данные добавляются в скрытый на странице блок;

3) блоку присваивается класс, в котором прописана анимация его появление (либо (о, ужас!) блок анимируется JS-ом).

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

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.content {
  animation: fade-in .4s ease;
}

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

Минус у данного подхода только один: новые элементы не могут храниться в DOM и ждать, пока мы наполним их контентом. Их разметку придется хранить на стороне JS…

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

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

Если в определенном месте на странице вам нужно добавить перенос строки, а в HTML лезть не хочется (или невозможно), на помощь придет CSS. Первое, что приходит в голову — добавить псевдоэлемент с тегом внутри:
.break:after {
    content: '<br />';
}

К сожалению (а может, и к счастью), добавлять теги в псевдоэлементы, нельзя. Но выход есть!
.break:after {
    content: '\A'; //код переноса строки
    white-space: pre; //заставляет браузер отображать текст с учётом всех пробелов и переносов, добавленных в код
}

Маленький пример.
SVG с интерактивными элементами

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

Но! У нас есть неплохая альтернатива — прописывать все стили взаимодействия прямо в SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <style type="text/css">
            rect {
                fill: blue;
            }
            rect:hover {
                fill: orange;
            }
        </style>
    </defs>

    <rect />
    <rect />
    <rect />
    <rect />
</svg>

Казалось бы, если мы прописали стили в самом изображении, то они должны отрабатывать при добавлении SVG как обычного <img />! Однако, не все так просто. Добавленные таким образом стили все равно работать не будут. Но мы можем сделать ход конем и добавить SVG на страницу с помощью <iframe> или <object>:
<iframe src="icon.svg"></iframe>
или
<object type="image/svg+xml" data="icon.svg"></object>

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

UPD. Пользователь Large поделился классным решением, которое подробно описано здесь.
Еше одно интересное решение от пользователя exeto.

Кстати, при желании в SVG-файл можно добавить и CSS анимацию:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <style type="text/css">
            @keyframes fill-change {
                0% {
                    fill: blue;
                }
                50% {
                    fill: orange;
                }
                100% {
                    fill: blue;
                }
            }
        
            rect {
                animation: 2s ease fill-change infinite;
                fill: blue;
            }
        </style>
    </defs>
    
    <rect />
    <rect />
    <rect />
    <rect />
    <path />
</svg>

Надеюсь, описанные здесь вещи показались вам интересными, а кому-то даже пригодятся на практике. До новых встреч!

Анимация появления блоков для Landing Page

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

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

Посмотреть Demo

Параметры jQuery плагина Revealator

Класс Описание
revealator-fade Обычное появление элемента
revealator-rotateleft Появление элемента с легким поворотом влево
revealator-rotateright Появление элемента с легким поворотом вправо
revealator-slideleft Появление элемента слайдом справа на лево
revealator-slideright Появление элемента слайдом слева на право
revealator-slideup Появление элемента слайдом снизу на вверх
revealator-zoomin Появление элемента с эффектом увеличения от большого к меньшему
revealator-zoomout Появление элемента с эффектом увеличения от меньшего к большему

Задержка:

Класс Описание
revealator-delay1 Установить задержку эффекта на 100ms
revealator-delay2 Установить задержку эффекта на 200ms
revealator-delay3 Установить задержку эффекта на 300ms
... ...
revealator-delay19 Установить задержку эффекта на 1900ms
revealator-delay20 Установить задержку эффекта на 2000ms

Продолжительность:

Класс Описание
revealator-duration1 Установить длительность эффекта на 100ms
revealator-duration2 Установить длительность эффекта на 200ms
revealator-duration3 Установить длительность эффекта на 300ms
... ...
revealator-duration19 Установить длительность эффекта на 1900ms
revealator-duration20 Установить длительность эффекта на 2000ms

Показывать эффект только один раз

При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.

Revealator

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

Плагин Revealator включает в себя два основных файла: fm.revealator.jquery.css – дополнительные стили эффектов, fm.revealator.jquery.js – скрипт. И, конечно, необходимо подключить библиотеку jQuery для работоспособности плагина. А также подключим еще один файл стилей, чтобы оформить внешний вид самой страницы демо-просмотра.

Так, все конструкции собрана в одном HTML коде с подключением всеми файлами. В нее входит 10 секций в каждой находится по 4 блока с классами, отвечающими за определенные эффекты анимации появления этих же блоков. В верхней части, между тегами <head></head> уже подключено 4 файла: два из них относится к плагину, библиотека jQuery, стили оформления страницы.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Revealator Plugin</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="fm.revealator.jquery.css">
      <script src="js/jquery-1.11.3.min.js"></script>
      <script src="js/fm.revealator.jquery.js"></script>
   </head>
   <body>
      <div>
         <h2>
            ↓↓↓ Scroll down ↓↓↓
         </h2>
      </div>
      <div>
         <div>
            revealator-slideup revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
      </div>
      <div>
         <div>
            revealator-slidedown revealator-once revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
      </div>
      <div>
         <div>
            revealator-slideleft revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
      </div>
      <div>
         <div>
            revealator-slideright revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
      </div>
      <div>
         <div>
            revealator-zoomin revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
      </div>
      <div>
         <div>
            revealator-zoomout revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
      </div>
      <div>
         <div>
            revealator-fade revealator-delay# revealator-duration10
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
      </div>
      <div>
         <div>
            revealator-rotateleft revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
      </div>
      <div>
         <div>
            revealator-rotateright revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
      </div>
      <div>
         <div>
            End
         </div>
      </div>
   </body>
</html>

На WordPress, добавить анимацию блоков, можно с помощью плагина Animate It!. У него также есть куча разных эффектов и при этом, он работает на чистом CSS.

Скачать демо просмотр

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *