CSS-анімації

CSS дозволяє робити прості анімації взагалі без JavaScript.

JavaScript можна використовувати для керування CSS-анімацією та покращення її, додавши зовсім трохи коду.

CSS-переходи

Ідея CSS-переходів дуже проста. Ми описуємо властивість і як саме її зміни мають бути анімовані. Коли властивість змінюється, браузер анімую цей перехід, тобто зміну значення.

Тобто все, що нам потрібно, це змінити властивість, а плавний перехід буде здійснюватися браузером.

Наприклад, наведений нижче CSS анімує зміни background-color протягом 3 секунд:

          .animated {
  transition-property: background-color;
  transition-duration: 3s;
}
        

Якщо елемент має клас .animated, будь-яка зміна background-color анімується протягом 3 секунд.

Натисніть кнопку нижче, щоб анімувати фон:

<button id="color">Натисни мене</button>

<style>
  #color {
    transition-property: background-color;
    transition-duration: 3s;
  }
</style>

<script>
  color.onclick = function() {
    this.style.backgroundColor = 'red';
  };
</script>

Є 4 властивості для опису переходів CSS:

transition-property
transition-duration
transition-timing-function
transition-delay

Зараз ми їх розглянемо, а поки зазначимо, що загальна властивість transition дозволяє оголошувати їх разом у порядку: property duration timing-function delay, а також анімувати декілька властивостей одночасно.

Наприклад, ця кнопка анімує color і font-size одночасно:

<button id="growing">Натисни мене</button>

<style>
#growing {
  transition: font-size 3s, color 2s;
}
</style>

<script>
growing.onclick = function() {
  this.style.fontSize = '36px';
  this.style.color = 'red';
};
</script>

Тепер розглянемо властивості анімації по черзі.