🚀CSS Animation trong 1h⏱️
Trong 1 giờ → đủ để làm 80% animation CSS thực chiến (ngắn gọn, trọng tâm, có ví dụ dùng ngay).
🚀 🧠 LỘ TRÌNH 1 GIỜ – CSS ANIMATION
⏱️ 0–10 phút: Hiểu bản chất
🎯 Có 2 loại animation
| Loại | Dùng khi nào |
|---|---|
transition | hover, click |
@keyframes | chạy tự động |
✨ 1. TRANSITION (cơ bản nhất)
.box {
transition: all 0.3s ease;
}
.box:hover {
transform: scale(1.2);
}
👉 Khi hover → nó chuyển động mượt
🧠 4 thuộc tính chính:
transition: property duration easing delay;
Ví dụ:
transition: transform 0.5s ease 0.2s;
🔥 2. KEYFRAMES (quan trọng nhất)
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
Áp dụng:
.box {
animation: move 2s linear infinite;
}
🧩 Cấu trúc animation
animation: name duration timing iteration direction fill-mode;
Ví dụ:
animation: move 3s ease-in-out infinite alternate;
🎯 10–30 phút: Hiệu ứng quan trọng nhất
🌟 1. Fade (mờ dần)
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
🚀 2. Scale (phóng to)
transform: scale(1.2);
↔️ 3. Translate (di chuyển)
transform: translateY(-100px);
🔄 4. Rotate (xoay)
transform: rotate(360deg);
💥 5. Kết hợp (pro)
@keyframes combo {
0% { opacity:0; transform: scale(0.5) translateY(50px); }
100% { opacity:1; transform: scale(1) translateY(0); }
}
🎬 30–45 phút: Hiệu ứng “điện ảnh”
🌌 1. Parallax (nhiều lớp)
👉 stars bạn đang làm chính là dạng này
✨ 2. Glow (phát sáng)
text-shadow:
0 0 10px #fff,
0 0 20px #0ff;
🌊 3. Ease (cảm giác chuyển động)
| Kiểu | Cảm giác |
|---|---|
| linear | đều đều |
| ease-in | tăng tốc |
| ease-out | giảm tốc |
| ease-in-out | mượt nhất |
🎯 4. Delay (cực quan trọng)
animation-delay: 2s;
👉 dùng để:
sync logo
sync crawl
làm intro
🧠 45–60 phút: Level nâng cao
🔥 1. Alternate (chạy qua lại)
animation: move 2s infinite alternate;
🔥 2. Forwards (giữ trạng thái cuối)
animation-fill-mode: forwards;
🔥 3. Multiple animation
animation:
move 5s linear infinite,
glow 2s ease-in-out infinite;
💣 4. Performance (rất quan trọng)
👉 Luôn ưu tiên:
transform
opacity
⛔ Tránh:
width
height
top/left (lag)
🎯 BÀI TẬP NHANH (5 phút)
👉 Tạo 1 box:
@keyframes demo {
0% { opacity:0; transform: translateY(50px) scale(0.8); }
100% { opacity:1; transform: translateY(0) scale(1); }
}
🧠 TÓM TẮT 1 CÂU
💥 Animation CSS = transform + opacity + timing
Mình có thể dạy tiếp:
🎬 làm Star Wars intro hoàn chỉnh
🌌 parallax nhiều layer
⚡ animation mượt như app native
🎵 sync với audio
Bạn đang đi đúng hướng rồi đó 😎
(đang đụng tới mấy thứ rất “pro” luôn)
✨ made by AI
p/S: xem demo superCV
Nhận xét
Đăng nhận xét