CSS анимация перезаписывает анимацию Greensock - PullRequest
Новая
       18

CSS анимация перезаписывает анимацию Greensock

1 голос
/ 22 апреля 2019

У меня есть временная шкала GSAP TweenMax, где я выбираю SVG-многоугольник с id #plane и анимирую его с помощью временной шкалы. Если, однако, я добавлю в css '#plane {animation: fly-plane 2s 0s 20 чередование замедлений вперед;}', тогда css переопределяет и полностью отключает анимацию GSAP. Это нормально? Я не нашел других сообщений по этому поводу, так что, наверное, нет? 

var plane = document.querySelector("#plane"),
  tl = new TimelineMax({ repeat: -1 });

tl.to(plane, 1, { xPercent: 50, width: 200, autoAlpha: 0.5 });

@keyframes fly-plane {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

#plane {
  animation: fly-plane 2s 0s 20 alternate ease-in-out forwards;
}

Так же, как и с классами

1 Ответ

1 голос
/ 23 апреля 2019

Да, это звучит довольно нормально - вы говорите CSS анимировать к совершенно другим значениям, чем GSAP для того же свойства (преобразования) того же элемента.Так что они борются за контроль.Я запутался в том, что ты ожидал.

Ширина и непрозрачность по-прежнему должны контролироваться GSAP, так как вы вызываете бой только с помощью "transform" :)

Если вам нужна дополнительная помощь, лучшее место - этовероятно, посвященные форумы на https://greensock.com/forums/

Счастливой твининг!

...