В последнее время у меня появилась привычка создавать на досуге разные CSS анимации, вдохновляясь примерами, с которыми я сталкиваюсь в своей работе в течение дня. Для создания задуманных мною анимаций я всегда стараюсь использовать как можно меньшее количество кода. В итоге я собрал в свою коллекцию некоторые хитрости, с помощью которых можно заставить CSS делать вещи, о которых, возможно, вы даже не подозреваете. Здесь я хочу поделиться некоторыми из них.
1. Быстрый переход в другое состояние во время анимации
С помощью функционала 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 – свойство прозрачности. Если прозрачность элемента установлена на какой-либо отметке, кроме дефолтной единицы, он приобретает собственный контекст наложения.
Я надеюсь, что эта статья поможет вам построить более впечатляющие творения, даже если вы ничего нового не узнали из нее :)!