钟摆
以顶部为轴的钟摆式摆动。
效果预览
参数调节
完整代码
/* 钟摆 */
@keyframes swing {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(12deg); }
60% { transform: rotate(-10deg); }
}
.swing { animation: swing 1.2s ease-in-out infinite; transform-origin: top center; }