30天挑戰:「CSS簡易動畫」 相關筆記
總結
使用animation-fill-mode: backwards;
讓animation-direction
為normal
或alternate
的元素在動畫開始時的時間點就套用@keyframes 0%
時的樣式
筆記
.btn
本身設定為position: relative;
讓其::after
在position: absolute;
狀態下可以根據按鈕本體進行定位animation-fill-mode: backwards;
讓.btn
在動畫開始時就呈現@keyframes moveFromBottom
在0%
的效果:opacity: 0;
與transform: translateY(3rem);
.btn:hover::after
代表 hover 按鈕後,其::after
會放大(scale(1.2, 1.4)
)並opacity: 0;