css3抖动动画（css抖动效果）

CSS3抖动动画指的是利用CSS3的一些内置动画属性及关键帧技术来制作带有抖动效果的动画。这种动画效果可以用于各种需要增强视觉冲击力的场合，例如网页中的按钮、标题、图标等等。

.button {
    animation: shake 0.5s;
    animation-iteration-count: 3;
}
@keyframes shake {
from, to {
    transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
    transform: translateX(10px);
}
}
    

以上是一个简单的CSS3抖动动画的例子。代码中首先定义了一个样式名为“button”的CSS类，这个类被赋予了一个名为“shake”的动画属性。这个属性指定了动画的名称、时长等等，其中包括了“animation-iteration-count”这个属性，他指定了动画的播放次数为3次。

接下来是动画关键帧的代码，定义了动画的具体效果。其中，在“from”到“to”的初始和结束位置处，用了“translateX(0)”来指定元素的“X轴平移”为0。在“10%、30%、50%、70%、90%”这些关键帧的位置上，将元素向左平移10像素。在“20%、40%、60%、80%”这些关键帧的位置上，将元素向右平移10像素。这样，元素就会在平移的过程中发生左右抖动的效果。

总的来说，CSS3抖动动画是一种简单但非常有效的动画效果。使用起来也非常方便，只需要定义好样式并指定要播放的次数和动画名称即可实现。如果需要实现更复杂的动画效果，可以尝试结合其他CSS3动画属性和关键帧技术进行设计。

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