CSS hỗ trợ rất nhiều hiệu ứng liên quan tới sự kiện chuyển động hay còn gọi là Animation. Trong bài dưới đây chúng ta sẽ tìm hiểu về Animation trong CSS các bạn nhé
Animation là gì ?
Animation (hay còn gọi là hiệu ứng) là tiến trình thay đổi hình dạng và tạo hiệu ứng di chuyển của các phần tử. CSS hỗ trợ rất nhiều hiệu ứng liên quan tới sự kiện chuyển động.
Bảng dưới liệt kê tất cả các hiệu ứng bạn có thể sử dụng trong CSS
| Stt | Tên hiệu ứng |
|---|---|
| 1 | Hiệu ứng Bounce |
| 2 | Hiệu ứng Bounce In |
| 3 | Hiệu ứng Bounce In Down |
| 4 | Hiệu ứng Bounce In Left |
| 5 | Hiệu ứng Bounce In Right |
| 6 | Hiệu ứng Bounce Out |
| 7 | Hiệu ứng Bounce Out Down |
| 8 | Hiệu ứng Bounce Up |
| 9 | Hiệu ứng Bounce Out Left |
| 10 | Hiệu ứng Bounce Out Right |
| 11 | Hiệu ứng Bounce Out Up |
| 12 | Hiệu ứng Fade Down Big |
| 13 | Hiệu ứng Fade In |
| 14 | Hiệu ứng Fade In Down |
| 15 | Hiệu ứng Fade In Left |
| 16 | Hiệu ứng Fade In Left Big |
| 17 | Hiệu ứng Fade In Right |
| 18 | Hiệu ứng Fade In Right Big |
| 19 | Hiệu ứng Fade in Up |
| 20 | Hiệu ứng Fade In Up Big |
| 21 | Hiệu ứng Fade Out |
| 22 | Hiệu ứng Fade Out Down |
| 23 | Hiệu ứng Fade Out Left |
| 24 | Hiệu ứng Fade Out Left Big |
| 25 | Hiệu ứng Fade Out Right |
| 26 | Hiệu ứng Fade Out Right Big |
| 27 | Hiệu ứng Fade Out Up |
| 28 | Hiệu ứng Fade Out UP Big |
| 29 | Hiệu ứng Flash |
| 30 | Hiệu ứng Flip |
| 31 | Hiệu ứng Flip In X |
| 32 | Hiệu ứng Flip In Y |
| 33 | Hiệu ứng Flip Out X |
| 34 | Hiệu ứng Flip Out Y |
| 35 | Hiệu ứng Hinge |
| 36 | Hiệu ứng Light Speed In |
| 37 | Hiệu ứng Light Speed Out |
| 38 | Hiệu ứng Pulse |
| 39 | Hiệu ứng Roll In |
| 40 | Hiệu ứng Roll Out |
| 41 | Hiệu ứng Rotate In Down Left |
| 42 | Hiệu ứng Rotate In |
| 43 | Hiệu ứng Rotate In Down Right |
| 44 | Hiệu ứng Wobble |
| 45 | Hiệu ứng Rotate In Up Left |
| 46 | Hiệu ứng Rotate In Up Right |
| 47 | Hiệu ứng Winggle |
| 48 | Hiệu ứng Rotate Out |
| 49 | Hiệu ứng Rotate Out Down Left |
| 50 | Hiệu ứng Rotate Out Down Right |
| 51 | Hiệu ứng Rotate Out Up Left |
| 52 | Hiệu ứng Rotate Out Up Right |
| 53 | Hiệu ứng Shake |
| 54 | Hiệu ứng Swing |
| 55 | Hiệu ứng Tada |
