Возможно ли иметь разные переходы для одной и той же анимации? - PullRequest
Новая
       51

Возможно ли иметь разные переходы для одной и той же анимации?

0 голосов
/ 24 февраля 2020

Я пытаюсь создать анимацию с множеством шагов.
Я хочу разные значения перехода для каждого изменения состояния стиля.

Однако использование transition внутри @keyframes не имеет никакого эффекта. 

.square {
  background-color: #333;
  height: 100px;
  width: 100px;
  animation: 4s move infinite;
}
@keyframes move {
  0% {
    transition: ease-in;
  }
  50% {
    transform: translate(100%);
    transition: ease-out;
  } 100% {
    transform: translate(0);
    transition: cubic-bezier(0.25, 0.1, 0.6, 1.8);
  }
}
<div class="square"></div>

Интересно, есть ли способ иметь разные переходы для каждого этапа анимации без необходимости комбинировать несколько animation в обернутых элементах.

1 Ответ

1 голос
/ 24 февраля 2020

Свойство transition ничего не делает внутри ключевых кадров. Вы можете либо использовать свойство transition, чтобы указать, как рисовать переходы между селекторами / преобразованиями (ie, по умолчанию и :hover), либо использовать ключевые кадры, чтобы указать, как оно преобразуется во временном диапазоне (ie, from / to или 0%, 50%, 100% и др. c).

Когда вы думаете об этом, это два разных способа выражения одной и той же информации.

Вы можете использовать свойство animation-timing-function в отдельных ключевых кадрах, если вы хочу больше контроля над переходами. Просто знайте, что это не поддерживалось в Safari (iOS / OSX) примерно до 2015 года, поэтому у вас могут возникнуть проблемы, если вам потребуется поддержка этих версий.

...