Переопределение свойства CSS-преобразования в анимации - PullRequest
Новая
       13

Переопределение свойства CSS-преобразования в анимации

0 голосов
/ 26 ноября 2018

Я недавно построил это маленькое демо , где три элемента непрерывно вращаются, пока вы не нажмете на один из них, а затем он переместится на середину экрана и станет больше.Вот код CSS: 

.spin {
  animation-name: spin;
  animation-duration: 0.9s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-fill-mode: backwards;
  animation-delay: 0s;
}

.selected {
  cursor: auto;
  animation-name: spin, selected;
  animation-duration: 0.9s, 1s;
  animation-timing-function: linear, ease-out;
  animation-iteration-count: infinite, 1;
  animation-play-state: paused, running;
  animation-fill-mode: backwards, forwards;
  animation-delay: 0s, 0s;
  z-index: 1;
}

@keyframes spin {
  0% {
    transform: translateX(150%) scale(0.5) rotate(10deg);
    opacity: 0;
  }

  50% {
    transform: translateX(0%) scale(1) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateX(-150%) scale(0.5) rotate(-10deg);
    opacity: 0;
  }
}

@keyframes selected {
  to {
    transform: translateY(0) scale(1.4) rotateY(180deg);
    opacity: 1;
  }
}

В Firefox этот код работает должным образом: щелчок останавливает анимацию spin, и элемент перемещается от места, где он находится, к параметру to анимации selected.В Chrome переопределение менее тонкое, элемент останавливается, а затем мгновенно появляется в середине экрана.

Я был бы признателен за любую помощь в выяснении способа, которым я мог бы добиться этого, применяя одну из анимаций кродительский элемент или без переопределения свойства transform карты, а также объясняет, почему существует другой подход к переопределению свойства transform.

...