[分享]css3抖一抖动画

CSS3中的抖一抖动画能够让页面元素在特定的情况下抖动起来，增加视觉效果，非常适用于一些需要强调的场合。/ 定义抖动动画 / keyframes shake { 0 { transform: tran...

CSS3中的抖一抖动画能够让页面元素在特定的情况下抖动起来，增加视觉效果，非常适用于一些需要强调的场合。

/* 定义抖动动画 */
@keyframes shake {
    0% { transform: translate(-10px); }
    25% { transform: translate(10px); }
    50% { transform: translate(-10px); }
    75% { transform: translate(10px); }
    100% { transform: translate(-10px); }
}

/* 应用抖动动画 */
.shake {
    animation: shake 1s ease infinite;
} 

以上代码中，我们定义了一个名为shake的keyframe动画，其中0%表示动画开始前的状态，100%表示动画结束后的状态。在25%、50%、75%的时候，我们通过transform属性对元素进行了位移操作，使其沿水平方向抖动。通过animation属性，我们将shake动画应用到了class为shake的元素上，并设置它的duration为1s，缓动方式为ease，同时重复播放无数次。

在使用CSS3抖一抖动画时，我们可以根据具体需求调整animation时长、缓动方式、重复次数等相关属性，从而达到更好的视觉效果。