Individual Laboratory Activity

Keyframes & Hover Effects

BSCpE 3B · CPEN 106: Software Design · Mr. Nomar Bersamin · May 18, 2026

1

4 Transition Hover Effects

Color
Change
Scale
Pop
Radius
Morph
Lift
Up
2

@keyframes spin — Loader Element

@keyframes spin rotates 0° → 360°
Applied via: animation: spin 1s linear infinite;
Timing: linear — constant speed, no acceleration
/* linear feels mechanical */
3

@keyframes bounce — 5 Stops + fill-mode: forwards

@keyframes bounce
Stops: 0% · 30% · 60% · 80% · 100%
animation-fill-mode: forwards;
element holds its end-state after finishing

Timing: ease-in-out
/* symmetrical speed curve */
4

Hover-Triggered @keyframes wiggle

HELLO
my name is
Genesis

↑ Hover the card to trigger @keyframes wiggle (7 stops: 0% 15% 30% 45% 60% 80% 100%)