Анимация

Преимущества перед transition

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

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

• создаем ключевые кадры @keyframes
  • задаем имя @keyframes
  • задаем минимум два ключевых кадра from и to
• перечисляем анимируемые CSS-свойства
• селектору передаем имя анимации, как значение свойства animation-name
• дополнительные настройки индивидуальные скорости выполнения, задержки и т.п.

Ключевой кадр:

@keyframes changeWidth {       
/*  имя должно быть описательным */
    from {
        /* Здесь перечисляются CSS-свойства */
        width: 0;
    }
    to {
        /* Здесь перечисляются CSS-свойства */
        width: 100%;
    }
}   

Применение анимации:

• Если просто добавить анимацию к стилю, который тут же применяется к элементу, то анимация будет применена при загрузке страницы
• Анимацию можно применить к одному из псевдоклассов, включая :hover , :active , :target или :focus
• Анимацию можно применить к стилю класса, и воспользоваться JavaScript
• К одному и тому же элементу можно применить более одной анимации

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.className:hover {
    animation-name: changeWidth, fadeIn;
    animation-duration: 1s;
}

.className:active {
    animation-name: fadeOut;
    animation-duration: .5s;
}
            

Функция распределения скорости анимации по времени

animation-timing-function: ease-out;
animation-timing-function: cubic-bezier(1, .03, 1, .115);

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

animation-delay: 1s;

Повторение анимации n-раз после события

animation-iteration-count: 10; // повторим 10 раз 
// повторим бесконечно - «пульсирующий» эффект
animation-iteration-count: infinite;  

Чтобы анимация при нечетных проигрываниях шла в прямом, а при нечетных — в обратном порядке

animation-direction: alternate;

!!! используйте четное число animation-iteration-count для возвращения в исходное состояние !!!

Сохранить элементу тот вид, который у него будет по завершении анимации

animation-fill-mode: forwards;

Краткая запись свойства animation

• имя обязательно указывать
• продолжительность обязательно указывать
• функция распределения скорости по времени
• количество раз
• направление
• задержка
• режим заполнения
• пример:

  .fade {
      animation: fadeOut 2s ease-in-out 2 alternate 5s forwards;
  }
  // соответсвует
  .fade {
      animation-name: fadeOut;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 2;
      animation-direction: alternate;
      animation-delay: 5s;
      animation-fill-mode: forwards;
  }