Делаем зарядку для глаз вместе с миньонами — анимация CSS3

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

Это далеко не первая статья на данную тему, поэтому рекомендую также другие свои статьи на тему CSS3 анимации:

• CSS3 анимация для начинающих
• Анимация фотоаппарата на CSS3
• Красивая анимация текста на CSS3

Переходите по ссылке ниже и выполняйте зарядку для глаз вместе с миньоном:

Посмотреть пример

В данной статье пойдет речь только о анимации CSS3, но хочу напомнить о бесплатном мини-курсе по созданию лендингов, который можно получить по этой ссылке: "Лендинг за 60 минут".

Этапы создания анимации "Зарядка для глаз"

1 этап. Выбор персонажа

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

Остановился я на миньонах. Данный миньон также создан на чистом CSS3 в таком же стиле, как я делал и старых персонажей:

• Абсолютное позиционирование блоков — чтобы их можно было размещать в произвольном месте
• Поворот — потому что иногда необходимо развернуть блок/блоки, чтобы добиться необходимого эффекта.
• z-index позиционирование — одни блоки перекрывают другие и получается тот результат, который нужен.

Миньон создан не мною. Некоторые стили я позаимствовал у Amina Poursaied.

2 этап. Анимация

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

• Анимация текста
• Анимация "подсказок"
• Анимация глаз

Я определил общее время, чтобы мне было удобнее ориентироваться при создании анимации для разных элементов и иметь общую шкалу времени. Поэтому я сделал длительность анимации для всех блоков 100 секунд.

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

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

Вывод

Кроме анимации, которую можно создать на чистом CSS, я еще хотел напомнить о наших глазах, которые работают всё время бодрствования. Делайте перерывы в работе и повторяйте действия за миньоном. Делайте отдых 2-3 минуты каждый час и Ваши глаза будут более сконцентрированные и готовыми к интенсивной работе 🙂 .

Успехов!

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