css3动画有抖动 图片

CSS3动画是给网页增加动态效果的一种技术，让网页看起来更加生动有趣。然而，在使用CSS3动画的过程中，一些问题也会出现，例如动画抖动或者图片的位置变化。

img {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) 1;
}
@keyframes shake {
10%, 90% {
    transform: translate3d(-1px, 0, 0);
}
20%, 80% {
    transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
}
40%, 60% {
    transform: translate3d(4px, 0, 0);
}
}

以上代码是一个图片抖动的CSS3动画实现，但是在实际应用中，使用这段代码可能会出现抖动的问题，这时候我们可以尝试给图片添加一个相对定位的属性。

img {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) 1;
    position: relative;
}
@keyframes shake {
10%, 90% {
    transform: translate3d(-1px, 0, 0);
}
20%, 80% {
    transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
}
40%, 60% {
    transform: translate3d(4px, 0, 0);
}
}
    

给图片添加相对定位属性后，可能会解决抖动的问题。当然，对于一些其他问题，我们也可以使用不同的方法来解决。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！