12.08.2025 —

CSS анимация для новичков

 

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

Введение в @keyframes и Анимацию

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

Далее мы свяжем @keyframes с селектором.

@keyframes

Здесь мы установим этапы анимации. Свойствами @keyframes являются:

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

К примеру:

@keyframes tutsFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Или так:

@keyframes tutsFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

Код выше будет применять переход к непрозрачности (opacity:) элемента, от непрозрачности: 1 до непрозрачности: 0. Оба подхода дают один и тот же результат

Анимация

Своиство animation используется для вызова @keyframes внутри CSS слектора.Animation может иметь следующие свойства:

  • Animation-name:@keyframes название (Мы использовали TutsFade).
  • Animation-duration:Время которое длиться анимация.
  • animation-timing-function устанавливает скорость анимации ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
  • animation-delay "заминка", устанавливает время через которое начнётся анимация.
  • animation-iteration-count : количество повторений анимации.
  • animation-direction даёт возможность изменять направление анимции (от начало до конца и наоборот).
  • animation-fill-mode определяет какие стили будут применяться к элементу, когда наша анимация закончится ( none | forwards | backwards | both )

К примеру:

.element { animation-name: tutsFade; animation-duration: 4s; animation-delay: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate; }

Или кратко:

.element { animation: tutsFade 4s 1s infinite linear alternate; }

Код выше создаст мигающий эффект, с 1-секундной "заминкой",задержкой анимации, общей продолжительностью в 4 секунды и бесконечным повторением.

Добавим кросс-браузерности

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

  • Chrome & Safari: -webkit-
  • Firefox: -moz-
  • Opera: -o-
  • Internet Explorer: -ms-

И должно это выглядить так:

.element {
    -webkit-animation: tutsFade 4s 1s infinite linear alternate;
    -moz-animation: tutsFade 4s 1s infinite linear alternate;
    -ms-animation: tutsFade 4s 1s infinite linear alternate;
    -o-animation: tutsFade 4s 1s infinite linear alternate;
    animation: tutsFade 4s 1s infinite linear alternate;
}

Наряду с @keyframes:

@-webkit-keyframes tutsFade { /* ваш стиль */ }
@-moz-keyframes tutsFade { /* ваш стиль */ }
@-ms-keyframes tutsFade { /* ваш стиль */ }
@-o-keyframes tutsFade { /* ваш стиль */ }
@keyframes tutsFade { /* ваш стиль */ }

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

Несколько анимаций

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

.element {
  animation: tutsFade 4s 1s infinite linear alternate,
             tutsRotate 4s 1s infinite linear alternate;
}
@keyframes tutsFade {
  to {
    opacity: 0;
  }
}
@keyframes tutsRotate {
  to {
    transform: rotate(180deg);
  }
}

Превращение квадрата в круг

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

Начало

Сначала создадим простую разметку. Мы не будем присваивать id для нашего div.

<div></div>

Добавим стили нашему div

div {
  width: 200px;
  height: 200px;
  background-color: coral;
}

Keyframes

Подготовим @keyframes, который мы назовём square-to-circle и зададим 5 стадий.

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

Мы должны определить стиль для каждой стадии, начнём с border-radius чтобы квадрат сменил круг.

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

В дополнение к этому мы можем установить цвет фона, background-color для каждой стадии.

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
  }
  75%  {
    border-radius:50% 50% 50% 0;
    background:lightcoral;
  }
  100% {
    border-radius:50%;
    background:darksalmon;
  }
}

Чтобы добавить ещё большей эффектности анимации добавим вращение div.

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  {
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

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

Имея нашу square-to-circle анимацию нам осталось применить её к div.

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite alternate;
}

Временная функция анимации

Последнее значение которое мы можем добавить - animation-timing-function. Она определит скорость, ускорение и замедление анимации.Рассчитать функцию трудно, но есть бесплатные сайты которые помогают настроить кривую Безье довольно легко.Я добавил нашему square-to-circle такие значения:

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}

Финальный код без префиксов

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
 
@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  {
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}
Яндекс.Метрика