» » @keyframes - Правила для анимации
70 0  

@keyframes - Правила для анимации

Правило CSS @keyframes управляет промежуточными шагами в последовательности анимации CSS, определяя стили для ключевых кадров (или путевых точек) вдоль последовательности анимации. Это дает больший контроль над промежуточными шагами последовательности анимации, чем переходами.

@keyframes привязывается к стилю через имя анимации.

Пример keyframes:

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}


what Внимание! есть несколько особенностей.

1. Игнорирование в ключевых кадрах !important:

@keyframes important1 {
  from { margin-top: 50px; }
  50%  { margin-top: 150px !important; } /* ignored */
  to   { margin-top: 100px; }
}

2. В каждом ключевом кадре должны быть все свойства (Вот так не правильно!):

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

3. Если в  анимации только 2 ключевых кадра то можно записать так:

@keyframes slidein {
  from {margin-left: 100%;}
  to {margin-left: 0%;}
}

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019