Hiệu ứng chuyển động bằng CSS sẽ giúp website trở nên ấn tượng hơn với người dùng khi truy cập vào. Trước khi tìm hiểu về Animation bằng CSS thì chúng ta nên có một khái niệm tổng quan về Animation nói chung.
Animation là gì? Định nghĩa: là một loại hình nghệ thuật, sử dụng sự chuyển động của nhân vật đồ họa để diễn tả một câu chuyện hay một thông điệp nào đó một cách sinh động, chuyên nghiệp và có mục đích rõ ràng. (trích nguồn: https://eventusproduction.com/)
“Animation is about creating the illusion of life.” - Brad Bird (tạm dịch: Hoạt hình là về tạo ra ảo ảnh về cuộc sống)
Animation là công cụ để giao tiếp hiệu quả. Sử dụng animation một cách tinh tế và phù hợp của nó giúp bố cục website của bạn trở nên nổi bật và thực tế hơn. Điều này xảy ra bởi vì con người đã quen với việc luôn nhìn thấy sự chuyển động ở thế giới thực.
Quay lại về sử dụng Animation với CSS, tại sao chúng ta cần sử dụng animation cho website của chúng ta? Bởi vì chúng là công cụ truyển tải thông điệp và thu hút sự chú ý của người dùng. Ví dụ: Thanh loading được sử dụng animation chuyển động từ trái sang phải để thông báo với user về thời gian để hoàn thành một trạng thái.
Tuy nhiên, "With great power comes great responsibility" (tạm dịch "Với sức mạnh lớn thì trách nhiệm càng phải lớn") . Đừng quá lạm dụng CSS Animation, nó sẽ khiến website của bạn trở nên nhàm chán và không có điểm nhấn bởi vì "Less is more" (tạm dịch "Càng tối giản càng tinh tế").
Trở lại với animation của CSS, chúng ta cần biết những thuộc tính và các dòng lệnh cơ bản có sẵn để có thể tùy chỉnh theo ý muốn của bản thân.
1. Các thuộc tính của CSS animation
animation-name : Để định tên của một hoặc nhiều @keyframes dùng để mô tả hoạt ảnh (animation).
animation-duration : Thời gian để animation cần để hoàn thiện một chu kì thường được tính bằng s hoặc ms
animation-timing-function : Thuộc tính CSS đặt cách một animation tiến triển trong suốt thời gian của mỗi chu kỳ.
animation-delay : Thuộc tính chỉ định độ trễ để bắt đầu ạnimation
animation-iteration-count : thuộc tính chỉ định số lần một hoạt ảnh sẽ được phát
animation-direction : Thuộc tính xác định xem một hoạt ảnh nên được phát tiến tới hay lùi lại trong các chu kỳ thay thế.
animation-fill-mode : Thuộc tính chỉ định kiểu cho vật đó khi animation không phát (trước khi bắt đầu, sau khi kết thúc hoặc cả hai).
animation-play-state : Thuộc tính chỉ định xem animation chạy hay tạm dừng
2. Về @keyframes
Trước khi thực hành về CSS Animation, hiểu rõ về @keyframes là một phần tất yếu để giúp cho animation của chúng ta có thể chạy được.
Keyframes được sử dụng để xác định số bước của animation và số bước ít nhất phải là 2 bước để animation chạy. Như ví dụ ở dưới đây, chúng ta có một @keyframes được đặt tên 'lefttoright' (tên này được đặt tùy ý) cho chuyển động animation từ trái sang phải.
@keyframes lefttoright {
from {left: 0px;}
to {left: 300px;}
}Với from là điểm bắt đầu còn to là điểm kết thúc của chu kì animation. Như ở trên, ta đã thấy một câu lệnh đơn giản để làm một vật chuyển động từ trái sang phải với left là dựa vào lề trái.
Tiếp tục, chúng ta tạo một div cũng trong file CSS để hiển thị animation của keyframes vừa được tạo ra.
.animation {
width: 100px;
height: 100px;
background: green;
position: absolute;
animation-name: lefttoright;
animation-duration: 10s;
}Ở ví dụ trên, chúng ta cần chú ý về tên gọi của @keyframes vừa được đặt là 'lefttoright' được định nghĩa tương ứng với trường animation-name. Ngoài ra, animation-duration được đặt để chạy chu kì animation là 10 giây. Ở html chúng ta gọi div đó ra để chạy.
<div class ='animation'></div>
Chạy animation như trên:
3. Ví dụ: Tạo quả bóng nảy với CSS animation
Sau đây sẽ là ví dụ đơn giản về áp dụng CSS animation cho việc làm Web.
Bước 1: Đầu tiên, tạo hình quả bóng với CSS (đây là CSS cơ bản nên ở trong bài viết này sẽ không đề cập sâu đến)
.bouncingball {
width:150px;
height:150px;
border-radius:100%;
background:#DEF245;
position:relative;
margin:auto;
}"Gọi ra" quả bóng ở trên file HTML
<div class="bouncingball"></div>Bước 2: Đặt tên cho animation với thuộc tính animation-name và đặt thời gian cho animation chạy là 1s với animation-duration (Đây là 2 thuộc tính buộc phải có để animation có thể chạy).
.bouncingball {
width:150px;
height:150px;
border-radius:100%;
background:#DEF245;
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: inifinite;
position:relative;
margin:auto;
}Để animation chạy vĩnh viễn thì chúng ta thêm thuộc tính animation-iteration-count và để là infinite
Bước 3: Thêm @keyframes vào trong CSS
@keyframes bounce {
0% {top: 0;}
50% {top: 140px;height: 140px;}
55% {top: 160px;height: 120px;}
65% {top: 120px;height: 140px;}
100% {top: 0;}
}Thời điểm bắt đầu của một @keyframes là 0% còn điểm kết thúc là 100% vì thế chúng ta có thể tùy chỉnh trạng thái ở thời điểm giữa animation. Trong ví dụ này, điểm kết thúc của @keyframes còn được chỉnh tương đương với điểm ban đầu để tạo ra cảm giác như là looping-animation (tạm dịch: Hoạt ảnh chuyển động lặp lại).
Để chuyển động trông mượt mà và thực hơn, thuộc tính animation-timing-function sẽ được thêm vào với hiệu ứng ease-in và ease-out.
Bước 4: Kết quả
4. Kết luận
Animation là một phần quan trọng của một website để khiến website đó trở nên thu hút hơn và CSS là một công cụ sẵn có để thực hiện nó. Ngoài tìm hiểu Animation trong CSS ra, việc sử dụng thư viện Javascript để hỗ trợ việc làm Animation là một cách nhanh và hiệu quả để đạt được hiệu ứng ở mức độ phức tạp hơn. Tổng kết lại, tìm hiểu về CSS Animation là một phần quan trọng nhưng cũng chỉ là một phần nhỏ để khiến website của chúng ta trở nên thú vị hơn vì thế tìm hiểu thêm các yếu tố khác và làm chủ được CSS là một điều front-end developer phải có.
