Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 18.07.2018

Наверх

Наверх

Практика: создание CSS-анимации

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

Задание

Помните нашу предыдущую практику, где мы создавали веб-страничку для музыкальной группы? Мы останемся верны этой тематике и создадим интерактивную карту с отметками, в каких городах музыкальная группа планирует проводить концерт. При наведении курсора на точку города будет появляться выноска с датой мероприятия и кнопкой «Купить билеты»:


Практика по CSS3-трансформациям и анимациям

Загрузка файлов

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

Загрузить архив RAR

План работы

  1. Для четырех точек на карте (города, в которых будут проходить концерты) создать пульсирующую анимацию для привлечения внимания.
  2. При наведении курсора на точку города анимация должна становиться на паузу. Когда курсор убран, анимация возобновляется.
  3. Также при наведении курсора на точку города должна плавно появляться небольшая выноска с местом и датой концерта, кнопкой для покупки билетов. Когда курсор убран, информационная выноска исчезает.
  4. Цвет кнопки в выноске должен меняться при наведении курсора.
  5. Примечание: в целях экономии места мы не записываем в обучающем уроке префиксы производителей. Но помните, что на реальных проектах их нужно использовать.

    1. Анимация для отметок на карте

    Откройте в браузере веб-страницу из скачанного архива. Перед вами блок с картой, на которой нанесено четыре отметки с названиями городов. Наша задача — создать эффект расходящихся волн вокруг каждой точки. Мы сделаем две волны, в роли которых будут выступать псевдоэлементы :before и :after:


    Псевдоэлементы удобно использовать, когда требуется добавить какое-то украшение к основному элементу. Это избавляет от необходимости добавлять лишний HTML-код, который не несет особого смысла.

    Откройте в редакторе кода документ style.css из папки css. В течение урока мы будем соблюдать порядок в таблице стилей, добавляя новые правила не просто в конец документа, а размещая их там, где это будет логично. Поэтому найдите селектор .pin .popover и добавьте над ним следующие стили для псевдоэлементов элемента .pin:

    .pin:before,
    .pin:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        border-radius: 50%;
        border: 1px solid #f3244a;
        width: 0;
        height: 0;
        margin-left: -2px;
        margin-top: -2px;
    }
    

    Мы не добавляем никакой контент к этим псевдоэлементам, а только создаем пустой блок с рамкой и скругленными углами, чтобы в итоге получить кольцо.

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

    Найдите в начале таблицы стилей комментарий /* Keyframes */ и запишите под ним два следующих правила @keyframes:

    @keyframes pinBeforeWave {
        from {
            width: 0;
            height: 0;
            margin-left: -2px;
            margin-top: -2px;
        }
        to {
            width: 40px;
            height: 40px;
            margin-left: -21px;
            margin-top: -21px;
            opacity: 0;
        }
    }
    
    @keyframes pinAfterWave {
        from {
            width: 0;
            height: 0;
            margin-left: -2px;
            margin-top: -2px;
        }
        to {
            width: 66px;
            height: 66px;
            margin-left: -34px;
            margin-top: -34px;
            opacity: 0;
        }
    }
    

    Обе анимации имеют одинаковое начало, но отличаются окончанием. Анимацию pinBeforeWave мы применим к псевдоэлементу :before, и в процессе ее выполнения он увеличится до размеров 40×40 пикселей (маленькая волна). Анимация pinAfterWave предназначена для псевдоэлемента :after, к концу которой он примет размеры 66×66 пикселей (большая волна).

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

    Давайте применим созданные анимации к псевдоэлементам. Для этого добавьте следующий код, разместив его следом под стилем для селектора .pin:before, .pin:after:

    .pin:before {
        animation: pinBeforeWave 1s ease-in infinite;
    }
    .pin:after {
        animation: pinAfterWave 1s ease-in infinite;
    }
    

    Обе анимации будут длиться одну секунду. Распределение скорости анимации в течение этой секунды будет происходить по функции ease-in. Анимация будет повторяться бесконечно.

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

    2. Пауза анимации при наведении курсора

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

    .pin:hover:before,
    .pin:hover:after {
        animation-play-state: paused;
    }
    

    Данный код говорит: когда на элемент .pin наведен курсор (состояние :hover), нужно поставить на паузу анимацию псевдоэлементов :before и :after.

    3. Появление выноски

    При наведении курсора на отметку должно происходить еще одно действие, а именно появление выноски с информацией о концерте. В изначальном состоянии все выноски скрыты от глаз посетителя с помощью свойств visibility: hidden и opacity: 0.

    Найдите в файле CSS селектор .pin .popover:before и добавьте следом за ним следующий стиль:

    .pin:hover .popover {
        visibility: visible;
        opacity: 1;
    }
    

    У вас мог возникнуть вопрос, зачем мы скрыли выноску сразу двумя способами. Дело в том, что использования лишь одного из этих свойств будет недостаточно. Если убрать свойство visibility и оставить только opacity: 0, то элемент не будет по-настоящему скрыт: да, он не будет виден для глаз, но его увидит скринридер, что иногда может мешать.

    Если же убрать свойство прозрачности и оставить только visibility: hidden, то мы не сможем добиться плавности при появлении элемента, поскольку свойство transition не действует на свойство visibility. Именно поэтому мы использовали сразу два свойства для скрытия выноски.

    Кстати о плавности. Если вы сейчас обновите страницу и наведете курсор на точку, то увидите, что выноска появляется, но делает это резко. Настало время обратиться к свойству transition. Найдите селектор .pin .popover и добавьте к нему такую строку:

    transition: all 0.2s ease-in-out;
    

    Теперь выноска появляется плавно: свойство opacity переходит от значения 0 к значению 1 за 200 миллисекунд, а скорость движения анимации соответствует функции ease-in-out.

    Идем дальше. Когда мы рассказывали о свойстве transition-delay, то упоминали о том, что его удобно применять для небольшой задержки выпадающего меню перед его исчезновением, чтобы пользователь успевал навести курсор на ссылку меню. Не лишним будет применить этот эффект и для выноски, чтобы она исчезала с легкой задержкой. Для этого добавьте еще одно значение к свойству transition для селектора .pin .popover0.5s перед точкой с запятой:

    transition: all 0.2s ease-in-out 0.5s;
    

    Но это еще не всё. Сейчас задержка появления выноски срабатывает в обоих направлениях — когда курсор наводится и когда отводится. Чтобы оставить задержку только для второго случая, допишите следующую строку к селектору .pin:hover .popover:

    transition-delay: 0s;
    

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

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

    В состоянии невидимости выноска будет развернута на 90 градусов по оси Y. Допишите следующий стиль к селектору .pin .popover:

    transform: rotateY(90deg);
    

    При наведении курсора на точку города выноска должна возвращаться в свое нормальное положение. Для этого добавьте строку ниже к стилю для селектора .pin:hover .popover:

    transform: rotateY(0deg);
    

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

    4. Цвет кнопки в выноске

    Последний пункт плана — плавное изменение цвета кнопки в выноске при наведении курсора на нее. Для начала создадим стиль для кнопки в состоянии :hover. Найдите селектор .pin .popover .button и запишите под ним следующий код:

    .pin .popover .button:hover {
        background-color: #e10087;
    }
    

    И, наконец, чтобы переход от начального цвета к конечному происходил плавно, добавьте эту строку к стилю селектора .pin .popover .button:

    transition: all 0.2s ease-in-out;
    

    Снова сохраните изменения и полюбуйтесь результатом.

    Завершение

    Поздравляем! Вы полностью прошли еще один раздел учебника и создали интерактивную карту. Как и всегда, в случае каких-либо проблем вы можете посмотреть готовый рабочий код, который лежит в архиве вместе с другими файлами. А вот и демо нашего урока:

    Смотреть демо

    Рекомендуем вам дополнительно потренироваться в использовании CSS-анимации: придумайте альтернативные эффекты и трансформации для выносок и отметок либо попробуйте создать анимацию на других веб-страницах. Как видите, это очень увлекательная тема!


    Когда вы будете готовы, приглашаем перейти к следующему разделу нашей книги, который посвящен стилизации таблиц и веб-форм. В первом уроке мы поговорим о том, как писать CSS для HTML-таблиц.