translate3d（translate3d置顶）
CSS 点击dom增加抖动效果：
常使用的场景：登陆错误或者表单验证失败
<div class="animated">抖动效果</div>
.animated {
background: #2D97DB;
width: 100px;
height: 100px;
line-height: 100px;
margin: 20px auto;
text-align: center;
animation: shakeX 2s ease-in-out infinite;
/*动作循环的次数：infinite 无限循环*/
}
@keyframes shakeX {
from,
to {
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
transform: translate3d(-0.5rem, 0, 0);
}
20%,
40%,
60%,
80% {
transform: translate3d(0.5rem, 0, 0);
}
}
本文内容仅供健康科普参考，不能替代专业医疗诊断和治疗建议。如有身体不适，请及时就医并遵从医师指导。
