我正在尝试在之前缩放过的图像上制作无限动画。问题是当动画开始时图像会恢复到原来的大小。我想保持图像的动画缩放。
我尝试添加一个触发动画的类,或从 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 */
}
我希望图片不会恢复到原来的大小。我试图保持缩放图像的状态以启动动画。
最佳答案
最简单的解决方法可能是将图像包裹在容器中,然后缩放容器并为图像设置动画,或者反过来;请注意,转换的顺序很重要。
否则,您可能必须将比例移动到摇动动画的变换中才能不覆盖它。可以使用空格组合变换函数,例如变换:scale(4) rotate(10deg);
。
关于javascript - 转换图像上的无限动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57449381/