Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Как в css сделать анимацию

Анимация CSS. Введение + свойство transition

Всем привет. Недавно наткнулся на серию очень полезных и интересных видеоуроков на тему «CSS анимация». Но вот ведь незадача, все видео были на английском языке, а, наверное, не каждый верстальщик знает английский на достаточном уровне, чтобы понять и усвоить всю необходимую информацию. Поэтому я решил перевести для вас эти уроки (точнее сделать вольный перевод). Не стоит благодарить. Итак:

CSS анимация. Введение + свойство transition (эта статья)
CSS анимация. Кейфреймы (keyframes) — скоро будет
Когда и зачем использовать CSS анимации? — скоро будет

Что такое CSS анимация?

Перед тем, как рассказать вам, как делать CSS анимации, и зачем они вообще нужны, я бы хотел для начала объяснить вам, что такое CSS анимация, дать определение что ли.

Анимации в вебе преследуют две основные идеи. Первая идея – оживить что-то. Вы как будто доктор Франкенштейн. У вас есть безжизненный монстр, и вы вдыхаете в него жизнь. Вторая – визуализация движения. И ключевое слово тут именно «движение».

Как анимировать?

В CSS есть два основных инструмента при помощи которых мы можем перемещать элементы по веб-странице. Первый (о котором мы еще поговорим сегодня) – свойство transition. В первую очередь именно с его помощью мы создаем анимации в CSS. Второй инструмент – это свойство animation в паре с кейфреймами (@keyframes – ключевые кадры). Этот инструмент мы более подробно остановимся в следующем уроке, а прямо сейчас мы рассмотрим свойство CSS transition. И еще потом мы поговорим о том, что нужно анимировать на странице (когда это нужно пользователю), а что не стоит анимировать (когда анимация выглядит тупо и неуместно), основываясь на пользовательском опыте (UX — user experience).

Свойство CSS transition – параметры и значения

Синтаксис

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

transition: [свойство] [длительность] [тайминг функция] [задержка] ;

transition: height 1s ease-out 0.2s ;

Мы присваиваем это свойство тому элементу, который мы хотим анимировать. Этот элемент получает плавный переход (или пошаговый) между несколькими своими состояниями (например, высота 100 пикселей и высота 200 пикселей). И то, как будет выглядеть этот переход (с англ. transition), будет зависеть от параметров, которые мы ему зададим.

Первым параметром (значением) свойства transition является другое свойство анимируемого элемента (например, height).

Вторым параметром является длительность (продолжительность) анимации, то есть, сколько времени займет переход элемента из одного состояния в другое (например, 2s или 2000ms).

Третий параметр – это тайминг функция [timing function] (изинг функция [easing function]). То, как интенсивность анимации распределится на протяжении всего времени. Например, анимация может резко начаться, а под конец замедлиться и плавно закончить переход. Могут использоваться как ключевые слова (например, ease, ease-in-out, linear), так и функции кубика Безье (например, cubic-bezier(0.17, 0.67, 0.83, 0.67)). Кубик Безье вы можете легко и удобно настраивать на этом ресурсе http://cubic-bezier.com , а также функция steps для того, чтобы создать покадровую анимацию (пошаговую).

Ну и наконец, параметр задержка. Задержка анимации – это время, которое необходимо подождать, прежде чем анимация (в нашем случае — переход) начнется.

Пример анимации CSS transition

Давайте рассмотрим такой пример CSS анимации:

transition: opacity 300ms ease-in-out 1s;

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

Вместо конкретного свойства можно использовать также ключевое слово «all». Это означает, что мы анимируем абсолютно все свойства элемента, которые были изменены в новом состоянии элемента (а не только opacity), и которые вообще можно анимировать. Потому что, как вам известно, не все свойства можно анимировать. Но об этом немного позже.

Второй параметр (300ms) говорит нам о том, что анимация продлится всего 300 миллисекунд. То есть элемент быстро появится или быстро растворится, в зависимости от значений свойств в двух его состояниях.

Тайминг функция (ease-in-out) третьим параметром сделает начало и конец анимации более плавными.

Задержка (1s) показывает на сколько должна опоздать анимации перед ее срабатыванием.

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

Что можно анимировать в CSS?

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

Анимируемые свойства

Взять, к примеру, такие свойства, как:

font-size;
background-color;
width;
left (на какое расстояние от левой стороны элемент может быть перемещен [спозиционирован]…

Очевидно, анимировать эти свойства имеет смысл. Если вы измените их значения, это изменит элемент визуально. Если вы измените размер шрифта, скажем, с 14 до 28 пикселей, вы увидите, что шрифт плавно увеличился, произошла анимация, которая длилась какое-то время. Анимация всегда имеет смысл, если значение свойств это четкие (чаще всего числовые) значения. Если вы увеличите размер шрифта до 100 пикселей, то вы явно увидите, как буквы растут. Плавное изменение цвета фона также можно пронаблюдать [потому что цвет в вебе имеет числовой код, например, красный rgb(255,0,0)]. Эти свойства являются анимируемыми.

Вообще запомните, если вы представить, что это анимируется – значит это можно анимировать. Чаще всего это работает.

Не анимируемые свойства

А вот список свойств, которые нельзя анимировать (пример):

display;
font-family;
position…

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

Возьмем display. Можете ли вы представить, как визуально будет происходить изменение между «display: block;» и «display: inline-block;»? Как может плавно измениться внешний вид элемента между «position: relative;» и «position: absolute;»? Нет, конечно же, элемент будет выглядеть иначе при изменении этих свойств. Но как вы можете представить себе переход? Вы не можете этого сделать. Верно? Вы не можете представить себе превращение шрифта Helvetica в шрифт Georgia, каждой буквы, это просто не сработает. Вы можете изменить эти шрифты, но они резко изменятся, никакой анимации не произойдет.

Производительность анимации в CSS

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

В общем вот вещи, которые наиболее хорошо подходят для анимации:

Позиционирование на странице
Масштабирование
Вращение
Прозрачность

Причем, первые три пункта этого списка, это все параметры свойства transform (translate, scale, rotate). Позиционирование происходит по осям X и Y.

Если вы решите анимировать еще что либо, вы рискуете не получить мягкий и плавный переход 60 кадров в секунду. Paul Lewis & Irish

А это именно то, что нас интересует, когда мы говорим о производительности анимации. В общем, самые подходящие свойства для анимации это transform и opacity. При анимировании чего либо другого, fps анимации может упасть гораздо ниже 60fps.

Давайте резюмируем этот пункт следующим. Старайтесь избегать перерисовки элементов на веб странице и анимации элементов, которые браузеру сложно отрендерить (например, тени).

Как сделать анимацию в CSS?

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

Это не сложно и для этого есть много разных способов. Но есть 2 основных, которые вы должны освоить в обязательном порядке. Первый способ – это анимация при наведении на элемент (псевдокласс :hover). Вы наводите курсор мыши на элемент, и срабатывает анимация. Таким образом можно анимировать сам элемент или любой из его дочерних элементов. Потом я покажу вам, как это работает. Второй способ – это изменение класса элемента. То есть у вас есть обычный элемент, вы меняете (или добавляете) его класс на класс, который имеет совсем другие стили. Если добавить класс произойдет анимация, и если убрать класс, произойдет обратная анимация. Это хороший способ для анимирования меню или выпадающих списков.

Послесловие

Мы рассмотрели все, что нам нужно для создания анимации на чистом CSS. Совсем скоро мы разберем практические примеры, а чуть позже – очень интересные примеры.

Вы дочитали до самого конца?

Была ли эта статься полезной?

Что именно вам не понравилось? Статья была неполной или неправдивой? Напишите в комментариях и мы обещаем исправиться! Спасибо, мы старались. Счастья и добра вам! Что будем делать дальше?Посмотреть похожие статьи Помогите, пожалуйста, сайту. Сделайте репост статьи хоть куда-нибудь:

Анимация в CSS

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

Итак, переходы в CSS являются специфическим видом анимации, где:

есть только два состояния: начало и конец;
анимация не зациклена;
промежуточные состояния управляются только функцией времени.

Но что если вы хотите:

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

Анимация в CSS позволяет всё это, и не только.

Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры).

Свойства анимации

Как и transition, свойство animation является сокращённым для нескольких других:

animation-name: название анимации;
animation-duration: как долго длится анимация;
animation-timing-function: как вычисляются промежуточные состояния;
animation-delay: анимация начинается спустя некоторое время;
animation-iteration-count: сколько раз должна выполняться анимация;
animation-direction: должно движение идти в обратную сторону или нет;
animation-fill-mode: какие стили применяются до начала анимации и после её завершения.

Быстрый пример

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

@keyframes bouncing{ 0% { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); } 100% { bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1); } } .loading-button { animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both; }

Сначала нужно написать реальную анимацию подпрыгивания с помощью @keyframes и назвать её bouncing. Затем вы можете использовать эту анимацию, применяя её к loading-button.

Я использовал сокращенное свойство animation и включил все возможные варианты:

animation-name: bouncing (совпадает с названием ключевых кадров)
animation-duration: 0.5s (полсекунды)
animation-timing-function: cubic-bezier(0.1,0.25,0.1,1)
animation-delay: 0s (без задержки)
animation-iteration-count: infinite (воспроизводится бесконечно)
animation-direction: alternate (идёт назад и вперёд)
animation-fill-mode: both

@keyframes

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

0% — первый шаг анимации;
50% — шаг на полпути в анимации;
100% — последний шаг.

Можно также использовать ключевые слова from и to вместо 0% и 100%, соответственно.

Вы можете определить столько ключевых кадров, сколько хотите, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них.

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

Чтобы определить анимацию, просто напишите ключевое слово @keyframes с его названием:

@keyframes around { 0% { left: 0; top: 0; } 25% { left: 240px; top: 0; } 50% { left: 240px; top: 140px; } 75% { left: 0; top: 140px; } 100% { left: 0; top: 0; } } p { animation: around 4s linear infinite; }

Обратите внимание, что начало 0% и конец 100% содержат одинаковые правила CSS. Это гарантирует, что анимация зациклится идеально. Поскольку счётчик итераций установлен как infinite, то анимация будет идти от 0% до 100%, а затем немедленно обратно к 0% и так бесконечно.

animation-name

Название анимации используется, по крайней мере, дважды:

при написании анимации с помощью @keframes;
при использовании анимации с помощью свойства animation-name (или через сокращённое свойство animation).

@keyframes whatever { /* ... */ } .selector { animation-name: whatever; }

Подобно именам классов CSS, название анимации может включать в себя только:

буквы (a-z);
цифры (0-9);
подчёркивание (_);
дефис (-).

Название не может начинаться с цифры или с двух дефисов.

animation-duration

Как и длительность перехода, длительность анимации может быть установлена в секундах (1s) или миллисекундах (200ms).

.selector { animation-duration: 0.5s; }

Значение по умолчанию равно 0s, что означает отсутствие анимации вообще.

animation-timing-function

Подобно функциям времени для переходов, функции времени для анимации могут использовать ключевые слова, такие как linear, ease-out или могут быть определены с помощью произвольных кривых Безье.

.selector { animation-timing-function: ease-in-out; }

Значение по умолчанию: ease.

Поскольку анимация в CSS использует ключевые кадры, вы можете установить линейную функцию времени и моделировать конкретную кривую Безье, определяя множество очень специфичных ключевых кадров. Посмотрите Bounce.js для создания передовой анимации.

animation-delay

Как и с задержкой перехода, задержка анимации может быть установлена в секундах (1s) или миллисекундах (200ms).

По умолчанию равно 0s, что означает отсутствие любой задержки.

Полезно использовать, когда включается несколько анимаций в серии.

.a, .b, .c { animation: bouncing 1s; } .b { animation-delay: 0.25s; } .c { animation-delay: 0.5s; }

animation-iteration-count

По умолчанию, анимация воспроизводится только один раз (значение 1). Вы можете установить три типа значений:

целые числа, вроде 2 или 3;
дробные числа, вроде 0.5, которые будут воспроизводить только половину анимации;
ключевое слово infinite, которое будет повторять анимацию бесконечно.

.selector { animation-iteration-count: infinite; }

animation-direction

Свойство animation-direction определяет, в каком порядке читаются ключевые кадры.

normal: начинается с 0%, заканчивается на 100%, начинается с 0% снова.
reverse: начинается со 100%, заканчивается на 0%, начинается со 100% снова.
alternate: начинается с 0%, идёт до 100%, возвращается на 0%.
alternate-reverse: начинается со 100%, идёт до 0%, возвращается на 100%.

Это легче представить, если счётчик итераций анимации установлен как infinite.

animation-fill-mode

Свойство animation-fill-mode определяет, что происходит перед началом анимации и после её завершения.

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

animation-fill-mode позволяет сообщить браузеру, если стили анимации также должны применяться за пределами анимации.

Давайте представим себе кнопку, которая является:

красной по умолчанию;
становится синей в начале анимации;
и в итоге зелёной, когда анимация завершена.

animation-fill-modeДо анимацииНачало анимацииКонец анимацииПосле анимации

none	По умолчанию	Начало	Конец	По умолчанию
forwards	По умолчанию	Начало	Конец	Конец
backwards	Начало	Начало	Конец	По умолчанию
both	Начало	Начало	Конец	Конец

Перейти к заданиям

10 Примеров Анимаций созданных только при помощи CSS

Мобильные браузеры с каждым днём становятся всё лучше и лучше, предоставляя нам возможность наслаждаться потрясающими анимациями. Вы будете удивлены, но современные возможности CSS позволяют создавать потрясающие проекты даже без использования изображений.Такие проекты будут полностью масштабируемыми, быстрым в загрузке, и, конечно же, впечатляющими.

Давайте взглянем на потрясающие проекты, созданные только при помощи HTML и CSS.

1. Велосепидист. Реализован только с помощью CSS

Здесь столько всего происходит, что очень трудно поверить что всё это работает только благодаря HTML и CSS! Сочетание вращающейся анимации и множественных многослойных движений создают иллюзию того, что велосипедист и его велосипед сделаны из желе. Обратите внимание на умное использование БЭМ в классах.

2. Сатурн и его Вращающиеся кольца

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

3. CSS анимация цветных слоёв

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

4. Загрузчик в форме мороженого на палочке

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

5. Анимация с голубем при помощи CSS

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

6. Дремлющий кот

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

7. Чёрный медведь

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

8. Плескающаяся губка

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

9. Почтовый конверт

Хорошо продуманная серия кадров анимации может рассказать целую историю или помочь пользователям понять, что они видят на экране.Здесь мы видим как конверт открывается и оттуда появляется письмо.

10. Загрузчик в форме машинки

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

Вдохновляйтесь и творите!

Как и всегда мы хотим поблагодарить Codepen и всех тех талантливых разработчиков, которые придумывали и создавали эти проекты. Они предоставили нам источник для вдохновения. Если вам понравилась эта статья, мы рекомендуем вам посетить несколько наших прошлых статей, которые также полны вдохновляющих примеров. Более того, в некоторых из них вы даже сможете научиться как создавать что-то подобное самому.

Хитрости CSS анимации

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

С помощью функционала CSS можно легко создавать эффекты перехода между двумя состояниями элемента через определенный промежуток времени. При этом с помощью свойства jump переход к новому значению можно сделать практически мгновенным. Хитрость заключается в том, чтобы использовать два значения свойства keyframe с очень маленькой разницей, например цифра .001% хорошо подойдет.

@keyframes toggleOpacity { 50% { opacity: 1; } /* Выключение */ 50.001% { opacity: 0.4; } /* Ненадолго оставляем выключенное состояние */ 52.999% { opacity: 0.4; } /* Снова включаем */ 53% { opacity: 1; } }

Вот так с помощью переключения между значениями свойств opacity и text-shadow я получил эффект, имитирующий мерцание света рекламного щита.

А вот и код примера быстрый переход в другое состояние во время анимации

2. Отрицательные задержки анимации

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

Ниже приведен пример, в котором анимации всех кругов начинаются немедленно и в разных точках анимационного цикла:

А вот и код примера отрицательные задержки анимации

3. Пропорции в анимации

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

Во многих анимациях я использую элементы с пропорциональными чему-либо значениями ширины и высоты: например, окружности и прямоугольники. Возможно, вы думаете, что я применяю для этого фиксированные значения ширины и высоты? Но это не так. Для этого я могу использовать значение ширины в процентах, высоту, равную нулю и значение padding, также заданное в процентах. Свойство padding-bottom – это хитрость, необходимая для того, чтобы сохранять пропорцию по отношению к ширине:

.container { position: relative; display: block; width: 100%; height: 0; padding-bottom: 100%; }

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

А вот и код примера пропорции в анимации

4. Изменение свойства transform-origin посреди анимации

Работая над одной из своих анимаций, я с удивлением обнаружил, что свойство transform-origin не только может быть изменено посреди анимации, но также и к нему самому можно применить анимацию. В примере ниже мы создали одну анимацию, используя повороты по разным осям вместо того, чтобы применять четыре разные анимации.

А вот и код примера изменение свойства transform-origin посреди анимации

Недостаток этого трюка заключается в том, что мы не можем использовать здесь свойство animation-mode: forwards; только лишь для части анимации. Это означает, что нам нужно перемещать элемент в эквивалентное положение перед тем, как применять изменение свойства transforma-origin. В примере выше это достигнуто применением переходов, чтобы имитировать эффекты вращения. Однако использование данной техники в более сложных примерах может стать слишком утомительным. Смотрите пример : пирамида-феникс.

5. Отрицательное значение свойства transform-origin

Для свойства transform-origin можно задать отрицательное значение. Это можно использовать, например, в создании траекторий кругового движения. Вместо того, чтобы отдельно задавать значения translate и rotate для одного элемента, мы можем пойти более простым путем. Мы можем применить отрицательные значения transform-origin и второй элемент или псевдоэлемент (или только один элемент, если мы хотим, чтобы он вращался и двигался по круговой траектории). Варьируя различные негативные значения свойства transform-origin, мы можем применять эту анимацию для множества элементов, при этом для каждого из них будет сохранено круговое движение.

А вот и код примера отрицательное значение свойства transform-origin

6. Чудеса с box-shadow

Для анимации простых, не содержащих контента форм можно применить свойство box-shadow. Данное свойство может создавать различные края у круглых элементов. С помощью данной техники, применив разные виды смещения, из элементов HTML можно создавать новые анимационные «фигуры». Образец ниже демонстрирует возможности данной техники. Мы создали шесть круглых элементов, двигающихся по круговой траектории. Для этого был взят всего лишь один элемент с применением к нему свойства box-shadow и смещения (offset).

А вот и код примера чудеса с box-shadow

К сожалению, проценты не поддерживаются свойствами внутренней тени, поэтому они не так легко ложатся в код, как родные элементы HTML. Но их все же можно изменить в анимации вручную или с использованием transform:scale(n) для элемента HTML, частью которого они являются.

7. Используем псевдо-элементы

Как с box-shadow, псевдоэлементы можно использовать, чтобы добавить больше контента на страницу. У них могут быть отдельные от родителя анимации, собственные внутренние тени, и вообще они очень похожи на дочерние элементы без разметки HTML. Давайте создадим анимацию на основе одного элемента, как в примере ниже.

А вот и код примера отрицательные задержки анимации

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

Возможные проблемы с z-index

Я, наверное, потратил больше времени, исправляя проблемы с z-index в моей анимации, чем на все остальное. В разных случаях z-index отображается по-разному. В случае с анимациями, основная разница заключается в том, что Webkit, например, анимирует значения z-index, тогда как Mozilla этого не делает (вместо этого элементы перескакивают от одного z-index к другому).

Еще одна вещь, на которую стоит обратить внимание – если вы хотите, чтобы ваши псевдоэлементы отображались за родительскими, у них должен быть негативный z-index, а для родителя должно быть установлено сугубо дефолтное наложение. Это значит, что вы не сможете применить z-index или какое-либо другое свойство, изменяющее естественный контекст наложения для родительского элемента.

Последняя проблема в отношении z-index – свойство прозрачности. Если прозрачность элемента установлена на какой-либо отметке, кроме дефолтной единицы, он приобретает собственный контекст наложения.

Я надеюсь, что эта статья поможет вам построить более впечатляющие творения, даже если вы ничего нового не узнали из нее :)!