Властивості анімацій

7.1 Властивість animation-name

CSS-анімації дозволяють створювати динамічні і плавні візуальні ефекти, покращуючи користувацький інтерфейс і роблячи його більш інтерактивним. Властивості анімацій дозволяють контролювати різні аспекти анімації, такі як ім'я, тривалість, функція таймінгу і затримка. Зараз ми детально розглянемо ці властивості і покажемо, як їх використовувати.

Властивість animation-name визначає ім'я анімації, яка буде застосована до елемента. Ім'я повинно відповідати імені, визначеному в правилі @keyframes.

Синтаксис:

    
      element {
        animation-name: animation-name;
      }
    
  

Де:

• animation-name: ім'я анімації, визначене в @keyframes

Приклад:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
      }
    
  

Пояснення коду:

• @keyframes moveRight: визначає анімацію з іменем moveRight, яка переміщує елемент вправо
• .box: елемент із застосованою анімацією moveRight

7.2 Властивість animation-duration

Властивість animation-duration визначає тривалість анімації. Значення вказується в секундах (s) або мілісекундах (ms).

Синтаксис:

    
      element {
        animation-duration: time;
      }
    
  

Де:

• time: тривалість анімації (наприклад, 2s для двох секунд або 500ms для 500 мілісекунд).

Приклад:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
      }
    
  

Пояснення коду:

• animation-duration: 2s: встановлює тривалість анімації moveRight у 2 секунди

7.3 Властивість animation-timing-function

Властивість animation-timing-function визначає швидкість зміни анімації впродовж часу. Воно дозволяє створювати різні ефекти анімації, такі як прискорення, уповільнення тощо.

Синтаксис:

    
      element {
        animation-timing-function: function;
      }
    
  

Де:

• function: функція таймінгу, що визначає швидкість зміни анімації (наприклад, ease, linear, ease-in, ease-out, ease-in-out)

Приклад:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

Пояснення коду:

• animation-timing-function: ease-in-out: встановлює функцію таймінгу для анімації moveRight, роблячи анімацію плавною з повільним початком і кінцем, і прискоренням у середині

Основні функції таймінгу:

• ease: анімація починається повільно, пришвидшується до середини і сповільнюється до кінця
• linear: анімація відбувається з постійною швидкістю від початку до кінця
• ease-in: анімація починається повільно і потім пришвидшується
• ease-out: анімація починається швидко і потім сповільнюється
• ease-in-out: анімація починається і закінчується повільно, пришвидшуючись у середині

7.4 Властивість animation-delay

Властивість animation-delay визначає затримку перед початком анімації. Значення вказується в секундах (s) або мілісекундах (ms).

Синтаксис:

    
      element {
        animation-delay: time;
      }
    
  

Де:

• time: затримка перед початком анімації (наприклад, 1s для однієї секунди або 500ms для 500 мілісекунд)

Приклад:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

Пояснення коду:

• animation-delay: 1s: встановлює затримку перед початком анімації moveRight у 1 секунду