Свойства анимаций

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 секунду

1

Задача

Модуль 1: Web Core, 12 уровень, 6 лекция

Недоступна

Тайминг анимации

Тайминг анимации

Открыть

1

Задача

Модуль 1: Web Core, 12 уровень, 6 лекция

Недоступна

Задержка анимации

Задержка анимации

Открыть