SVG трясет анимацию при наведении - PullRequest
Новая
       8

SVG трясет анимацию при наведении

0 голосов
/ 14 января 2019

Я пытаюсь сделать svg img встряхнуть с ключевыми кадрами CSS, когда вы наводите курсор на него, но по какой-то причине он не работает на сайте: http://setup.industries/outrage/

Этого эффекта я пытаюсь добиться: https://www.w3schools.com/code/tryit.asp?filename=FZ7CQHXPG42J

Существует некоторый javascript, который анимирует тот же svg, но он нацелен на родительский div #ellipse, который перемещается слева направо при нажатии на значок гамбургера. Я не понимаю, как это может помешать, но я добавил это, чтобы убедиться.

Я добавил соответствующий код ниже. Полный код смотрите на сайте. 

// Other unrelated(!?) animations on #ellipse //

function moveEllipseRight() {
  ellipse.animate([
    // keyframes
    {
      transform: 'translateX(0px)'
    },
    {
      transform: 'translateX(' + width + 'px)'
    }
  ], {
    // timing options
    duration: 500,
    iterations: 1,
    easing: 'ease-in-out',
    fill: 'forwards'
  });
}

function moveEllipseLeft() {
  ellipse.animate([
    // keyframes
    {
      transform: 'translateX(' + width + 'px)'
    },
    {
      transform: 'translateX(0px)'
    }
  ], {
    // timing options
    duration: 500,
    iterations: 1,
    easing: 'ease-in-out',
    fill: 'forwards'
  });
}
#ellipse {
  position: absolute;
  top: 120px;
  z-index: -99;
  animation: 3s linear 0s slide 1;
  left: -200px;
}

img.shake:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
<div id="ellipse">
  <img src="https://lh5.googleusercontent.com/-yqttzktPkDY/AAAAAAAAAAI/AAAAAAAABGU/z6CVGRmY-C8/photo.jpg?sz=328" alt="ellipse" class="shake" width="400" height="400" />
</div>

1 Ответ

0 голосов
/ 14 января 2019

Проблема с вашим #ellipse стилем. 

#ellipse {
    position: absolute;
    top: 120px;
    z-index: -99; /* remove this, it is not doing anything useful. */ 
    animation: 3s linear 0s slide 1;
    left: -200px;
}

проблема была в том, что hover вообще не срабатывал, так как находился за элементом container из-за отрицательного значения z-index. Этот отрицательный индекс z бесполезен, если только вы не планируете разместить текст над изображением, которого я не вижу на вашем сайте.

...