Переходи

4.1 Властивість transition

CSS-переходи (transition) дозволяють анімувати зміни значень властивостей CSS, створюючи плавні переходи між їх початковими і кінцевими станами. Це потужний інструмент, який покращує зручність використання, додаючи динаміку до веб-сторінок. Розглянемо основні аспекти переходів, включаючи властивості, тривалість та функції таймінгу.

Властивість transition об'єднує всі аспекти переходу в одне властивість. Воно може включати:

1. Властивості, які будуть анімуватися.
2. Тривалість анімації.
3. Функцію таймінгу.
4. Затримку перед початком анімації (за бажанням).

Синтаксис:

    
      element {
        transition: property duration timing-function delay;
      }
    
  

Де:

• property: властивість, до якої застосовується перехід (наприклад, width, height, background-color)
• duration: тривалість переходу (наприклад, 2s для двох секунд або 500ms для 500 мілісекунд)
• timing-function: функція таймінгу, яка визначає швидкість зміни анімації (наприклад, ease, linear, ease-in, ease-out, ease-in-out)
• delay: затримка перед початком переходу (наприклад, 1s для однієї секунди)

Приклад:

    
      
       
   
       
   
       
   

     Контент 
   
    
  

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s ease-in-out, background-color 1s ease;
      }
    
  

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

• transition: width 2s ease-in-out, background-color 1s ease: визначає два переходи: один для властивості width з тривалістю 2 секунди і функцією таймінгу ease-in-out, і інший для властивості background-color з тривалістю 1 секунда і функцією таймінгу ease

4.2 Властивості переходів

1. Властивість transition-property

Властивість transition-property визначає, до яких властивостей елемента будуть застосовуватись переходи.

Синтаксис:

    
      element {
        transition-property: property1, property2 ...;
      }
    
  

Приклад:

    
      .box {
        transition-property: width, height, background-color;
      }
    
  

2. Властивість transition-duration

Властивість transition-duration задає тривалість переходу.

Синтаксис:

    
      element {
        transition-duration: time;
      }
    
  

Приклад:

    
      .box {
        transition-duration: 2s, 1s, 3s;
      }
    
  

3. Властивість transition-timing-function

Властивість transition-timing-function визначає швидкість зміни анімації протягом часу.

Синтаксис:

    
      element {
        transition-timing-function: function;
      }
    
  

Приклад:

    
      .box {
        transition-timing-function: ease-in, linear, ease-out;
      }
    
  

4. Властивість transition-delay

Властивість transition-delay задає затримку перед початком переходу.

Синтаксис:

    
      element {
        transition-delay: time;
      }
    
  

Приклад:

    
      .box {
        transition-delay: 1s, 0s, 500ms;
      }
    
  

4.3 Тривалість переходів

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

Приклад:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s, height 1s, background-color 500ms;
      }
    
  

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

• transition: width 2s, height 1s, background-color 500ms: визначає, що перехід для властивості width триватиме 2 секунди, для height — 1 секунду, а для background-color — 500 мілісекунд.

4.4 Функції таймінгу

Функції таймінгу визначають, як значення властивості змінюється протягом часу. Вони дозволяють створювати різні ефекти анімації.

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

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

Приклад:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
      }
    
  

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

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