Как реализовать на css3 плавное появление элемента

CSS3 позволил делать много новых эффектов, не прибегая к помощи JavaScript-библиотек. В этой статье расскажу о том, как реализовать с помощью css3 плавное появление любого элемента.

Смотрим на примере

Допустим, у нас есть два одинаковых блока. В html разметке я предлагаю обозначить их так:

<div class="block block1">Блок 1</div>
<div class="block block2">Блок 2</div>

Каждый элемент получил два стилевых класса. Зачем это нужно? Первым классом мы зададим общие правила внешнего вида, блоки же одинаковые, так что их можно описать совместно. В реальном примере, скорее всего, будет по-другому. Также каждый элемент получил собственный уникальный стилевой класс. Он тоже пригодится.

.block{
    font-size: 50px;
    width: 200px;
    height: 120px;
    background: green;
    margin-bottom: 30px;
    transition: 1s
}

Этими правилами мы прописали обоим блокам одинаковый внешний вид: высоту, ширину, размер шрифта, отступ и зеленый фон. Последнее свойство transition как раз и является относительно новым и входит в версию CSS3. Оно обозначает задержку, после которой выполняются определенные правила. По сути, именно это дает плавное появление.

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

Как реализовать в css3 плавное появление?

Дальше есть два варианта действий. Допустим, нам нужно пока скрыть второй блок, а при наведении на первый плавно выводить его. Наиболее часто для скрытия элемента применяют правило display: none, но оно не даст именно того, чего нужно – плавного появления. Элемент появится резко.

Поэтому мы поступим по-другому. Смотрите этот код:

.block2{
    opacity: 0;
}
.block1:hover + .block2{
    opacity: 1
}

Мы использовали еще одно CSS3-свойство – opacity. Оно задает прозрачность элемента, которая прописывается от 0 (полностью прозрачный) до 1 (полностью непрозрачный) элемент.

Сначала полностью убираем второй блок от глаз, делая его прозрачным. Теперь нужно сделать так, чтобы при наведении мышки на первый блок плавно появлялся второй. Для этого используется такой вот интересный комбинированный селектор .block1:hover + .block2

То есть само изменение стилей происходит при наведении на первый блок, а изменяется непосредственно второй. Благодаря прописанному ранее transition он появится не резко, а плавно, что нам с вами и нужно. Изменяя значение transition можно сделать появление более резким или наоборот еще больше замедлить его.

Вот с такой вот скоростью появляется блок при выставленном значении transition: 1s. Кстати, значение можно задавать и в миллисекундах, если хотите.

See the Pen
eXVWZG
by Mikhail (@mixa430899)
on CodePen.

Понравилась статья? Поделиться с друзьями:
Комментариев: 6
  1. Илья

    Отличный сайт!

  2. Артем

    В IE-8 не красиво смотрится. блок просто размещается рядом с картинкой и при наведении на контент резко меняет свое положение. потом опять прыгает рядом с картинкой.

    1. Михаил (автор)

      Скорее всего это из-за того, что свойство transition не поддерживается в IE 8. Можно попробовать написать свойство с вендорным префиксом: -ms-transition. Если не сработает, то для IE этой версии можно сделать плавное появление на Javascript/Jquery

    2. mr.vakarchuk

      В 2016 то, пора бы уже и положить на IE8!

      1. Михаил (автор)

        Зачем если его никто не использует?

        1. Mario

          Не «зачем», а «что» laugh Парень ровно про то же, что и ты написал.

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