Учебник по CSS-анимации

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

Некоторые общие свойства, которые мы можем анимировать, включают цвета (color & background-color) и числа, такие как height & width.

Ознакомьтесь с полным списком анимируемых свойств CSS.

Создание анимации

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

Рассмотрим пример:

Наша анимация определена с помощью свойства animation & это движение с @keyframes, как показано ниже:

.ball {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: red;
  border: 2px solid #000;
  animation: bounce 1s infinite alternate;
}
@keyframes bounce {
  from {
    margin-top: 0;
  }
  to {
    margin-top: -250px;
  }
}

Наш элемент перемещается между различными начальной и конечной позициями (в данном случае мы изменили отступ).

Подсвойства

Существует ряд подсвойств, с которыми мы можем работать, чтобы получить больше контроля:

Рассмотрим еще один пример:

Здесь мы используем следующие значения:

.ball {   
  animation-name: grow;
  animation-duration: 2s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;  
}

Мы можем упростить этот процесс, используя шорткод animation:

.ball {   
  animation: 
    grow
    2s     
    ease-out     
    0s     
    alternate     
    infinite     
    none     
    running; 
}

В нашем примере ключевые кадры установлены следующим образом:

@keyframes grow {
  0% {
    transform: scale(.5);
    background-color: red;
    border-radius: 100%;
  }
  50% {
    background-color: blue;
  }
  100% {
    transform: scale(1.5);
    background-color: purple;
  }
}

Как уже упоминалось, мы можем использовать путевые точки с @keyframes для дальнейшего управления анимацией. Они задаются в процентах, где 0% — это начало анимации, а 100% — конец.

В нашем примере начальное состояние (0%) установлено на масштаб .5 & красный, затем на 50% пути мы изменили цвет на синий, а на 100% он увеличился до 1,5 и стал фиолетовым.

Работа с несколькими анимациями

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

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

.ball {
  animation: 
    colorswap 2s linear infinite alternate, 
    movement 6s ease-out infinite alternate;
}

Замечание о префиксах

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

.element {
  -webkit-animation: YOUR-KEYFRAME-NAME 1s infinite;
  -moz-animation:    YOUR-KEYFRAME-NAME 1s infinite;
  -o-animation:      YOUR-KEYFRAME-NAME 1s infinite;
  animation:         YOUR-KEYFRAME-NAME 1s infinite;
}
@-webkit-keyframes YOUR-KEYFRAME-NAME {
  0%   { /* ... */ }
  100% { /* ... */ }
}
@-moz-keyframes YOUR-KEYFRAME-NAME {
  0%   { /* ... */ }
  100% { /* ... */ }
}
@-o-keyframes YOUR-KEYFRAME-NAME {
  0%   { /* ... */ }
  100% { /* ... */ }
}
@keyframes YOUR-KEYFRAME-NAME {
  0%   { /* ... */ }
  100% { /* ... */ }
}

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь

🌎 Давайте общаться

• Портфолио

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen