TaskBuild the animated card. @keyframes appear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }. .card animation: appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both, padding 24px, background white, border-radius 12px, box-shadow 0 1px 3px rgba(0,0,0,0.1), transition transform 0.2s, max-width 320px. .card:hover transform: translateY(-4px). .card h3 animation: appear 0.5s ease-out 0.1s both. .card p animation: appear 0.5s ease-out 0.2s both. .card .cta padding 10px 20px, background #3B82F6, color white, border none, border-radius 8px, transition: background 0.15s, transform 0.15s. .card .cta:hover background #2563EB, transform translateY(-1px). .card .cta:active transform translateY(0). Reduced-motion override at end.
Module capstone: animated landing card
200 XP14 min
Theory
Putting B7 together
Build a card that demonstrates EVERY B7 concept:
- B7-01: transition on hover.
- B7-02: spring cubic-bezier easing.
- B7-03: compositor-only transform + opacity.
- B7-04: @keyframes for entrance.
- B7-05: staggered entrance animations.
- B7-06: spinner for a "loading" indicator.
- B7-09: @starting-style (optional).
- B7-10: polished button with hover/active/focus.
- B7-11: reduced-motion override.
End: a card that fades + slides in on load, lifts on hover, has a polished CTA button, all motion respecting prefers-reduced-motion.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.