CSS анимация отменяет другой стиль в SVG - PullRequest
Новая
       72

CSS анимация отменяет другой стиль в SVG

1 голос
/ 25 сентября 2019

Я пытаюсь перевернуть и оживить стрелку SVG.Флип преобразование работает.Анимация (из animate.css) работает.Но когда я объединяю их, анимация, кажется, отменяет обратное преобразование.

Я включил соответствующий код в этот кодовый блок: https://codepen.io/jgullick/pen/YzKgzaX

Стрелка SVG указывает вправопо умолчанию.Я хочу, чтобы это указывало влево и трясло одновременно.

HTML: 

<svg class="flipLeft animated shake" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>

CSS: 

.flipLeft {
   -moz-transform: scaleX(-1) !important;
  -o-transform: scaleX(-1) !important;
  -webkit-transform: scaleX(-1) !important;
  transform: scaleX(-1) !important;
  filter: FlipH !important;
  -ms-filter: "FlipH" !important;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Спасибо

Джеймс

...