Как анимировать с помощью CSS

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

В то время как анимация традиционно достигается с помощью GIF, SVG, WebGL и фонового видео, анимация также может быть эффективно создана с помощью CSS. Браузерная поддержка CSS-анимации значительно улучшилась и становится довольно популярной — совместимые браузеры включают Firefox 5+, IE 10+, Chrome, Safari 4+ и Opera 12+.

Сегодня я познакомлю вас с основами создания CSS-анимации с пошаговой демонстрацией. Оставайтесь после этого и посмотрите пять примеров анимации. Вы сможете использовать все эти идеи для создания анимации для ваших собственных проектов!

Основы CSS-анимации

Очевидно, важно охватить основы того, как работает анимация, прежде чем мы погрузимся в пять забавных анимаций CSS.
Например, ключевые кадры являются ключевым компонентом анимации CSS. Возможно, вам знаком этот термин, если вы работали с Adobe Flash или имеете опыт редактирования видео. В этом случае термин «ключевой кадр» — это именно то, что вы могли бы подумать: это способ указать определенное действие.

Возможно, вы уже встречали @keyframes в таблицах стилей CSS. Внутри этого @keyframes вы определяете стили и этапы анимации. Вот отличный пример эффекта затухания:

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Основы ключевого кадра затухания, который мы только что создали, включают в себя:

• Описательное имя: в данном случае fadeOut.
• Этапы анимации: «От» было установлено на 0%, а «До» — на 100%.
• Стили CSS, которые будут применяться на каждом этапе.

По умолчанию From будет иметь значение 0%, а To будет равно 100%, так как в этом примере не указаны другие этапы.

Конкретные действия с подсвойствами анимации

Нам нужно сделать немного больше, чтобы стилизовать вещи — нам нужно стилизовать свойство animation с подсвойствами. Если ключевые кадры определяют, как будет выглядеть анимация, то подсвойства анимации определяют определенные правила для анимации. Они позволяют настроить время, продолжительность и другие ключевые детали того, как должна развиваться последовательность анимации.

Свойство анимации используется для вызова @keyframes внутри селектора CSS. Анимации могут и часто будут иметь более одного подсвойства. Вот примеры подсвойств:

Сотрудничество с художником по моушн-графике

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

• Animation-name: имя at-правила @keyframes , которое описывает ключевые кадры анимации. Имя fadeOut в предыдущем примере является примером имени анимации.
• Продолжительность анимации: время, которое требуется анимации для завершения одного полного цикла.
• Функция синхронизации анимации: синхронизация анимации, в частности, как анимация переходит через ключевые кадры. Эта функция позволяет устанавливать кривые ускорения. Примеры: linear, easy, easy-in, easy-out, easy-in-out или кубический-безье .
• Задержка анимации: задержка между моментом загрузки элемента и началом анимации.
• Animation-iteration-count: сколько раз должна повторяться анимация. Хотите, чтобы анимация длилась вечно? Вы можете указать бесконечность , чтобы повторять анимацию бесконечно.
• Направление анимации: должна ли анимация менять направление при каждом прогоне последовательности или возвращаться к начальной точке и повторяться.
• Animation-fill-mode: значения, которые применяются анимацией как до, так и после выполнения.
• Animation-play-state: с помощью этой опции вы можете приостановить и возобновить последовательность анимации. Примеры: нет, вперед, назад или и то, и другое .

Собираем все вместе для лучшей поддержки браузера

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

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

• Chrome и Safari: -webkit-
• Фаерфокс: -moz-
• Internet Explorer: -ms-

Internet Explorer 10 не требует префикса для переходов, но префикс требуется для всех преобразований. Opera защищена, потому что распознает стили WebKit.

Начало перехода

• -webkit-transition
• -moz-transition
• transition

Начало трансформации:

• -webkit-transform
• -moz-transform
• -ms-transform
• transform

Пять анимаций в действии

Теперь, когда мы рассмотрели основы, давайте создадим код для использования!

Анимация первая: от круга к квадрату

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

Создание div для начала — отличный способ протестировать анимацию:

<div class=”animationOne”>
</div>

Теперь давайте настроим наши @keyframes . Эта анимация будет состоять из пяти стадий, потому что у квадрата четыре стороны, и нам нужно иметь начальную точку 0%. Используйте префиксы, как показано ниже, но в оставшейся части урока мы будем использовать только основы.

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

Теперь давайте создадим несколько стилей, чтобы определить, каким будет радиус границы на каждом этапе:

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

Теперь добавьте свойство background-color , чтобы различать каждую стадию анимации:

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

Наконец, давайте применим анимацию к тестовому div:

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

Свойство анимации обычно записывается сокращенно, поэтому вот что на самом деле происходит в коде:

• Название анимации — circle-to-square .
• Продолжительность анимации составляет 2s с.
• Задержка анимации составляет 1s с.
• Количество итераций анимации infinite , поэтому оно будет продолжаться бесконечно.
• И направление анимации alternate . Это означает, что он будет воспроизводиться от начала до конца и вернется к началу.

Анимация вторая: вращение

Эта анимация позволяет вращать объект.

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

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

Продолжительность этой анимации составляет две секунды с трехсекундной задержкой. Количество итераций анимации равно пяти, поэтому этот проект будет анимироваться пять раз перед остановкой. Анимация воспроизводится в обратном порядке каждый нечетный раз (1,3,5,…) и в нормальном направлении каждый четный раз (2,4,6,…).

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

Анимация третья: расширение и мерцание

Это отличная анимация для кнопки, потому что она более привлекательна и заметна по сравнению с другими элементами на странице. Это также может быть полезно включить в состояние :hover .

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

Чтобы использовать тест, нам нужен следующий стартовый div:

.animationThree {
width: 200px;
height: 200px;
}

<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>

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

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

Анимация пятая: исчезновение

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

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

<div class=”animationFive”>
<img src=".." />
</div>

Анимация CSS3 отлично подходит для того, чтобы заставить ваш сайт двигаться и двигаться! Теперь, когда у вас есть базовые понятия для создания анимации, возможности анимации безграничны. Что вы будете анимировать?