Как «перепрыгнуть» одно значение преобразования в анимации? - PullRequest
Новая
       51

Как «перепрыгнуть» одно значение преобразования в анимации?

1 голос
/ 14 марта 2020

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

В моем правиле @keyframes есть 3 percetanges со свойством transform в каждом. Я хочу, чтобы только масштабировался до go от 0,5 до 1 от первого до третьего процентов (то же самое, что происходит с изменением цвета) вместо того, чтобы идти с первого на второе.

Я знаю, что это происходит потому, что преобразование неявно применяет scale(1) во втором процентном выражении.

Возможно ли это сделать без создания более чем одной анимации? 

.block {
  background-color: #333;
  height: 150px;
  width: 150px;
  margin: 100px;
  animation: rolling 3s forwards infinite;
}
@keyframes rolling {
  33% {
    background: green;
    transform: scale(0.5);
  } 66% {
    transform: translate(20%);
  } 100% {
    background: red;
    transform: scale(1) translate(100%);
  }
}
<div class="block"></div>

1 Ответ

1 голос
/ 14 марта 2020

Вы можете добавить значение scale вручную 

.block {
  background-color: #333;
  height: 150px;
  width: 150px;
  margin: 100px;
  animation: rolling 3s forwards infinite;
}

@keyframes rolling {
  33% {
    background: green;
    transform: scale(0.5);
  } 66% {
    transform: scale(0.75) translate(50%);
  } 100% {
    background: red;
    transform: scale(1) translate(100%);
  }
}
<div class="block"></div>
...