Веб-анимация наиболее часто создается с использованием двух положений: начального и конечного состояний или расположений A и B. Движение элементов по дугам, эллипсам и окружностям используется реже, но об этом тоже важно знать.

Окружности

Окружности — наиболее простой вариант. Самое важное, от чего зависит все остальное, — задать значения свойства начала трансформации элемента. Здесь и далее весь код CSS приведен для ясности без приставок производителей, которые уже и не нужны для большинства современных версий браузеров:

div#redball {
        width: 50px; height: 50px;
        border-radius: 50%;
        background: red;
        transform-origin: 200% center;
}

Начальная точка для каждой трансформации будет располагаться в 200px правее элемента:

Элемент HTML со смещенным началом трансформации

Это означает, что вращение элемента будет происходить вокруг точки смещения начала трансформации:

@keyframes circle { 
        to { transform: rotate(1turn); }
}
div#redball {
        animation: circle 2s infinite;
}

Также важно изменить значение по умолчанию временной характеристики перехода: если Вам нужно, чтобы движение было бесконечным прямолинейным, используйте следующие значения:

div#redball {
        animation: circle 2s infinite linear;
}

Это создаст бесшовную анимации движения по кругу.

Lea Verou предложила другой хороший способ анимирования движения элементов по кругу.

Дуги

Линейная анимация, примененная к движению по дуге, обычно будет выглядеть искусственно и неуместно. Для создания движения маятника, как в уроке о гипнотизирующей анимации логотипа, нужно применить значение временной характеристики перехода ease-in-out, при котором анимация начнется медленно, немного ускорится и закончится тоже медленно, а также ограничить область вращения:

@keyframes sway {
        to { transform: rotate(30deg); }
}
#watch {
        transform-origin: center top;
        transform: rotate(-30deg);
        animation: sway 2.2s infinite alternate ease-in-out;
}

Такой тип анимации часто используется для показа чего-то: урок «веер из фотографий с иcпользованием CSS» — это хороший пример такого применения.

Эллипсы

Самая сложная форма движения — наиболее характерное для нашей вселенной движение по эллипсу. Наиболее простой известный нам способ создать это движение — разделить анимированное движение на слои: двигать элемент вверх и вниз половину фазы, когда он двигается по кругу. Чтобы добиться этого, элемент вкладывается в контейнер:

<figure>
        <div id="redball"></div>
</figure>

И каждый элемент анимируется отдельно:

@keyframes circle { 
        to { transform: rotate(1turn); }
}
@keyframes updown {
        to { transform: translateY(200px); }
}
figure {
        animation: updown 1s infinite ease-in-out alternate;
}
div#redball {
        width: 100px; height: 50px;
        border-radius: 50%; background: red;
        transform-origin: center 300%;
        animation: circle 2s infinite linear;
}

Движение вверх-вниз продляет круговую анимацию в эллипс, усиливая вертикальное или горизонтальное движение, определяя основные оси эллипса. Значение временной характеристики перехода ease-in-out используется, чтобы сделать движение плавным, так как иначе получится движение по закругленному ромбу, Направление анимации alternate проигрывает ключевые кадры вперед, затем назад и так по кругу и используется для того, чтобы вертикальное движение повторялось вперед-назад плавно. Обратите внимание на то, что анимация вверх-вниз происходит половину времени, в отличие от анимации по кругу.

И результат выглядит следующим образом:

Использована фотография Jaime Junior, лицензированная по лицензии Public Domain.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание часов со стрелками
• Создание эффекта набора текста
• Ограничения анимации CSS