[分享]css3左右抖动效果

CSS3 左右抖动效果是近年来非常流行的一种网页动效。通过使用 CSS3 的 transform 属性，可以非常简单地给网页元素增加左右抖动的效果，增强页面的活力。.box{ animation: s...

CSS3 左右抖动效果是近年来非常流行的一种网页动效。通过使用 CSS3 的 transform 属性，可以非常简单地给网页元素增加左右抖动的效果，增强页面的活力。

.box{
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}
 
@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);
    }
} 

代码中，通过设置动画的 keyframes，让元素在不同的时间点进行不同的 transform 运动。这样就实现了左右抖动的效果。其中， transform 属性的 translate3d 方法可以在三维空间中移动元素，让元素更具立体感。

除了左右抖动效果，我们也可以通过修改代码中的参数，实现其他不同的抖动效果。比如将 translate3d 方法中的第一个参数改为 0，第二个参数改为 -1，就可以实现上下抖动的效果。