animate。css动画抖动

animate.css是一种优秀的CSS动画库，它可以帮助Web开发人员以一种简单、有趣的方式添加动画效果。使用animate.css，开发人员可以使用预先构建的CSS类轻松地实现各种动画效果，无需编写大量的JavaScript代码。

animate.css中有一种有趣的动画效果叫做抖动动画，可以帮助开发人员在Web界面中添加一些独特的动态效果，从而吸引用户的注意力。在animate.css中，抖动动画由以下类实现：

.animated {
/*...*/
}
/* 水平抖动 */
@keyframes shake { 
0% { transform: translateX(0); }
10%, 90% { transform: translateX(-10px); }
20%, 80% { transform: translateX(10px); }
30%, 50%, 70% { transform: translateX(-10px); }
40%, 60% { transform: translateX(10px); }
100% { transform: translateX(0); } 
}
/* 垂直抖动 */
@keyframes shakeY { 
0% { transform: translateY(0); }
10%, 90% { transform: translateY(-10px); }
20%, 80% { transform: translateY(10px); }
30%, 50%, 70% { transform: translateY(-10px); }
40%, 60% { transform: translateY(10px); }
100% { transform: translateY(0); } 
}
/* 抖动 */
.animated.shake {
animation-name: shake;
}
/* 垂直抖动 */
.animated.shakeY {
animation-name: shakeY;
}

要使用抖动效果，只需要将相应的CSS类添加到HTML元素上即可，例如：

<div class="animated shake">这是抖动效果</div>

通过这种方式，就可以轻松地为您的Web界面添加动态抖动效果，并吸引用户的注意力。如果你正在寻求一种实现动画效果的快速而有效的方法，使用animate.css的抖动动画是一个很好的选择。

查看更多关于animate。css动画抖动的详细内容...