Анимация CSS — работа фотоаппарата

Анимированных элементов на странице становится всё больше. Многие размещают на своих сайтах Flash баннеры, но это не самый лучший выход. Потому что с развитием технологии CSS, мы можем создавать анимацию без использования JS и не прибегая в Flash. Это позволяет делать нам анимация CSS. Если Вы всё еще сомневаетесь в ее возможностях, тогда дочитайте до конца данную статью.

Как обычно, необходимо начинать изучение с самых азов. Рекомендую изучить принцип создания анимации CSS на простом примере. Вот данная статья:

• CSS3 анимация для начинающих

Кроме анимации с ключевыми кадрами также есть анимация CSS с помощью преобразований. Она немного легче и не так громоздко выглядит. Вот уроки по этой теме:

• Анимация с помощью CSS преобразований. Часть 1 — введение
• Анимация с помощью CSS преобразований. Часть 2 — реальный пример
• Анимация с помощью CSS преобразований. Часть 3 — продвинутая анимация

Для начала взгляните на пример CSS анимации:

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

Последний кадр анимации выглядит следующим образом:

Анимация CSS — разбираем «по косточкам»

HTML часть анимации

Начнём со структуры документа. Ничего дополнительно подключать не нужно. Только файл стилей, в котором у нас будет информация о ключевых кадрах. Вот весь код HTML:

1
2
3
4
5

<div class="wrapper">
    <div class="photoBg">
        <div class="photoFlash"></div>
    </div>
</div>

Подробно пройдемся по каждому блоку:

• Блок с классом wrapper — это контейнер, в котором находятся блок с изображением. Он необходим для поворота изображения и обрезания лишних частей при увеличении.
• Блок с классом photoBg — этот блок содержит изображение на фоне.
• Блок с классом photoFlash — блок, который нужен для анимации вспышки.

CSS часть анимации

Сразу предупреждаю: я буду разбирать код без префиксов (префиксы это приставки, которые используются производителями браузеров для экспериментальных CSS-свойств). Иначе придется приводить в пример очень большие части кода.

Начнём рассматривать с первого контейнера, в котором всё находится:

1
2
3
4
5
6
7
8
9

.wrapper {
    margin-top:15%; /* Отступ сверху */
    width: 100%; /* Ширина контейнера занимает всю ширину блока-родителя */
    min-width: 800px; /* Ширина не должна становиться менее 800px */
    overflow: hidden;  /* Всё что за пределами этого блока - "обрезаем" */
    animation: rotateBlock 9s linear infinite; /* Задаем анимацию для этого блока */
    transform:rotate(-15deg); /* Поворачиваем на 15 градусов против часовой */
    border:30px solid #F28510; /* Граница для блока */
}

Я все свойства прокомментировал, но хочу подробнее рассмотреть вот это свойство:

1

animation: rotateBlock 9s linear infinite;

Это свойство отвечает за анимацию и привязку ключевых кадров анимации CSS. Что значит каждое из этих значений:

• rotateBlock — произвольное название ключевых кадров анимации (см. ниже).
• 9s — длительность анимации.
• linear — скорость изменения анимации.
• infinite — количество повторений анимации. Infinite — бесконечно.

Перейдем к ключевым кадрам этой анимации. Анимацию мы назвали "rotateBlock", поэтому сейчас определим ключевые кадры анимации:

1
2
3
4
5
6

@keyframes rotateBlock {
    0% {transform:rotate(0); border:0 solid #F28510;}
    62% {transform:rotate(0); background-position: -20px -120px; border:0 solid #F28510;}
    65% {transform:rotate(-15deg); border:30px double #F28510;}
    100% {transform:rotate(-15deg);}
}

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

• 0% — начало анимации, поэтому все свойства "сбрасываем" и видим блок без поворота и без рамки.
• 62% — пока всё еще рано поворачивать и задавать границу, а немного смещаем фон.
• 65% — поворачиваем блок на 15 градусов против часовой стрелки и добавляем границу.
• 100% — указываем что до конца анимации блок должен быть под углом.

Мы рассмотрели основной блок. Давайте посмотрим на блок с изображением и то, что с этим изображением происходит:

1
2
3
4
5
6
7
8
9
10
11
12

.photoBg {
    background: url(../images/background-image.jpg) no-repeat; /* Адрес изображения */
    background-position: -20px -120px; /* Конечное положение фонового изображения */
    background-size: cover; /* Растягиваем фоновое изображение пропорционально блоку */
    width:100%; /* Блок по ширине растягивается на всю ширину блока-родителя */
    min-width: 600px; /* Минимальная ширина 600px */
    padding-bottom:50%; /* Маленькая хитрость: по высоте этот блок должен быть пропорционален изображению */
    position:relative; /* Необходимо для дальнейшего абсолютного позиционирования блока "photoFlash" */
    overflow: hidden; /* Обрезаем всё за пределами это блока, потому что изображение будет увеличиваться и смещаться */
    animation: scaleIn 9s linear infinite; /* Задаем анимацию */
    transform:scale(3); /* Конечное увеличение блока */
}

Всё также прокомментировано. Сейчас давайте посмотрим на ключевые кадры этой анимации:

1
2
3
4
5
6
7
8

@keyframes scaleIn {
    0% {transform:scale(1);background-position: 0 0;}
    20% {transform:scale(2);background-position: 100px 20px;}
    40% {transform:scale(1.7);background-position: -50px -50px;}
    60% {transform:scale(3);background-position: -20px -120px;}
    90% {transform:scale(3);background-position: -20px -120px;}
    100% {transform:scale(3);background-position: -20px -120px;}
}

Всё построено на том, что блок иногда увеличивается и фоновое изображение смещается:

• 0% — никакого смещения и увеличения нет.
• 20% — смещаем на 100px вправо и на 20px вниз, а также увеличиваем.
• 40% — смещаем на 50px влево и на 50px вверх, немного уменьшаем.
• 60% — смещаем на 20px влево и на 120px вверх, увеличиваем.
• 90% — оставляем то же положение (необязательно).
• 100% — конечное положение.

Хорошо, с самыми сложными вещами мы разобрались. Сейчас давайте рассмотрим как появляется вспышка. Вот стили для этого блока:

1
2
3
4
5
6
7
8
9
10

.photoFlash {
    position:absolute; /* Абсолютное позиционирование относительно блока-родителя (блок "photoBg") */
    top:0; /* Расположение по вертикали - прижат к верху */
    left:0; /* Расположение по горизонтали - прижат к левой стороне */
    width: 100%; /* Ширина блока - на всю ширину блока-родителя */
    height: 100%; /* Высота блока - на всю высоту блока-родителя */
    background: #fff; /* Фон - белый цвет */
    animation: flashAnimation 9s linear infinite; /* Анимация вспышки */
    opacity: 0; /* Прозрачность */
}

А сейчас ключевые кадры:

1
2
3
4
5

@keyframes flashAnimation {
    60% {opacity: 0}
    61% {opacity: 1}
    62% {opacity: 0}
}

Здесь блок должен появиться и пропасть. При этом всё это должно происходить достаточно быстро. Давайте посмотрим по ключевым кадрам:

• 60% — прозрачность блока 0%, то есть его не видно.
• 61% — прозрачность блока 100%. Он полностью появился.
• 62% — прозрачность блока 0, то есть он опять пропадает.

Давайте посчитаем в секундах, за сколько происходит вспышка. Если вся анимация длится 9 секунд, а здесь всё происходит за 2%, то получаем 0.18 секунды. Быстро? Но это ведь вспышка… 🙂

Вывод

Интересная анимация получилось, правда? Это не flash, который может быть заблокирован плагинами в браузерах и загружается достаточно быстрее. Смотрится он также, как обычный Flash.

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

P.S. Баннер, который Вы видите ниже, над комментариями сделан на чистом CSS.

Успехов!

С Уважением, Юрий Немец