转换图像上的无限动画

Question

我正在尝试在之前缩放过的图像上制作无限动画。问题是当动画开始时图像会恢复到原来的大小。我想保持图像的动画缩放。

我尝试添加一个 class 来触发动画，或者从 JS 手动添加 (myImage.animate(myKeyframes, myOptions))。两种解决方案都失败了。

这是我目前的做法：

myImage.style.transform = 'scale(4)'
myImage.addEventListener('transitionend', () => {
    myImage.classList.add('animationClass')
})

.myImage.animationClass {
    animation: shake 0.2s infinite;
}

@keyframes shake {
    /* keyframes stuff */
}

我希望图片不会恢复到原来的大小。我试图保持缩放图像的状态以启动动画。

Answer 1

最简单的解决方法可能是将图像包裹在容器中，然后缩放容器并为图像设置动画，或者反过来；请注意转换的顺序很重要。

否则，您可能必须将比例移动到摇动动画的变换中才能不覆盖它。可以使用空格组合变换函数，例如transform: scale(4) rotate(10deg);.

Infinite animation on transformed image