鉸鏈擺動
以左上角為支點像鉸鏈一樣擺落。
效果預覽
參數調節
完整代碼
/* 鉸鏈擺動 */
@keyframes swingHinge {
0% { transform: rotate(0); }
25% { transform: rotate(70deg); }
55% { transform: rotate(50deg); }
75% { transform: rotate(65deg); }
100% { transform: rotate(0); }
}
.swing-hinge { transform-origin: top left; animation: swingHinge 1s ease-in-out both; }