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);

}

}