跳到主要内容

左右摇头

快速小幅左右摆动,用于「不正确」的反馈。

效果预览
参数调节
完整代码
/* 左右摇头 */
@keyframes headShake {
  0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-8px) rotate(-3deg); }
    30%      { transform: translateX(7px) rotate(3deg); }
    45%      { transform: translateX(-6px) rotate(-2deg); }
    60%      { transform: translateX(5px) rotate(2deg); }
    80%      { transform: translateX(-2px) rotate(-1deg); }
}

.head-shake { animation: headShake .7s ease-in-out both; }