Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   @kayframes но с возможностью пересчитать % (https://javascript.ru/forum/css-html/82408-%40kayframes-no-s-vozmozhnostyu-pereschitat-%25.html)

fori 01.05.2021 17:58

@kayframes но с возможностью пересчитать %
 
Здравствуйте, я пытаюсь сделать инверсию движения по временной шкале для @kayframes.
Тоесть я хочу сделать анимацыю для двух противоположных кадров (затухающий и появляющийся) но так как не хочится писать два почти однаковых @kayframes, пытаюсь в первом кадре (затухающемся) использовать те процентные @kayframes значения что по умолчанию а в другом (появляющемся) кадре тотже @kayframes но с (100%-х%) процентнымы значениями.
Код:

//Пример затухающегося кадра
@keyframes swing {
  0% {
            transform: translateX(0);
  }
  30% {
            transform: translateX(10%);
  }
  60% {
            transform: translateX(20%);
  }
  90% {
            transform: translateX(30%);
  }
  100% {
            transform: translateX(33%);
  }
}

Код:

//пример появляющегося кадра
@keyframes swing {
  100% {
            transform: translateX(0);
  }
  90% {
            transform: translateX(10%);
  }
  60% {
            transform: translateX(20%);
  }
  30% {
            transform: translateX(30%);
  }
  0% {
            transform: translateX(33%);
  }
}

Кадры почти идентичны за исключением временной шкалы, могу ли я использовать только один @keyframes вместо 2 для одной анимации...

рони 01.05.2021 18:02

fori,
https://developer.mozilla.org/ru/doc...tion-direction


Часовой пояс GMT +3, время: 15:05.