CSS Animation? Chuyện nhỏ

Ở bài hướng dẫn này, mình sẽ viết CSS3 một cách đơn giản nhất có thể. Chúng ta bắt đầu nào. Let’s go…

Trước tiên, để thêm hiệu ứng (animation), các bạn chỉ cần làm 2 việc:

  1. Khởi tạo một hiệu ứng
  2. Gắn hiệu ứng cho một phần tử và thiết lập những thông số thích hợp

Hiệu ứng là một tập hợp các khung (key frames) chuyển tiếp nhau, chúng sẽ được viết bằng CSS và có cấu trúc như sau:

Để mình giải thích cho các bạn dễ hiểu hơn. Từ khoá (key word) @keyframes dùng để khai báo khởi tạo một hiệu ứng. Tiếp theo là tên của hiệu ứng, ở đây mình đặt tên hiệu ứng là test-animation. Danh sách các frame sẽ nằm trong hai dấu ngoặc móc. Ở ví dụ này, frame bắt đầu là frame 0%  và frame kết thúc là frame 100%. Ngoài ra, frame bắt bầu và kết thúc có thể dùng từ khoá fromto (from thay cho 0%, to thay cho 100%)

Chúng ta có thể viết nhiều frame hơn. Ví dụ:

Khi khởi tạo hiệu ứng frame bắt đầu (from, 0%) hoặc frame kết thúc (to, 100%) có thể không cần khai báo, lúc này trình duyệt (browser) sẽ lấy các giá trị tương ứng khi hiệu ứng không được sử dụng. Hơi khó hiểu nhưng các bạn xem ví dụ sẽ hiểu ngay 🙂

Ghi chú: Từ ví dụ này trở về sau, mình sẽ viết thêm 1 vài đoạn javascript để điều khiển hiệu ứng. Các bạn có thể click lên các hình để hiệu ứng chạy nhé 😉

Starting frame is not set:

Ending frame is not set:

Ở ví dụ này mình khai báo 2 key fame

Do không khai báo frame bắt đầu và frame kết thúc nên trình duyệt sẽ lấy giá trị mặc định của element đã khai báo là width: 50px

Cũng ở ví dụ trên, mình kết nối hiệu ứng với element bằng thuộc tính animation-nameanimation-duration của CSS:

Thuộc tính animation-name được gắn với tên hiệu ứng mình đã khởi tạo với từ khoá @key-frame. Còn thuộc tính animation-duration sẽ quy định thời gian chạy của hiệu ứng. Thuộc tính này được thiết lập ở đơn vị giây (3s, 65s, .4s) hoặc mili giây (300ms, 600ms)

Ta cũng có thể nhóm các frame lại với nhau:

Ta cũng có thể gán nhiều hiệu ứng cho một phần tử HTML, nhưng phải lưu ý là tên và các tham số của hiệu ứng phải tương ứng thứ tự:

Ở ví dụ trên, hiệu ứng animation-1 sẽ thực thi trong 2s và hiệu ứng animation-24s.

Ngoài hai thuộc tính animation-nameanimation-duration, css còn hỗ trợ một vài thuộc tính nữa để thiết lập cho hiệu ứng

Animation delay

Thuộc tính animation-delay thiết lập thời gian chờ cho hiệu ứng (đơn vị s hoặc ms). Khi sử dùng thuộc tính này hiệu ứng sẽ chờ một khoảng thời gian rồi mới bắt đầu chạy.

Lặp hiệu ứng

Thuộc tính animation-iteration-count quy định số lần lặp lại của hiệu ứng. Ta có thể thiết lập bằng các giá trị số nguyên hoặc chuỗi infinite để hiệu ứng lặp lại vĩnh viễn

Trước và sau trạng thái của hiệu ứng

Thuộc tính animation-fill-mode quy định trạng thái của phần tử sau khi hiệu ứng kết thúc. Thuộc tính này có các giá trị sau:

  • forward: Sau khi hiệu ứng kết thúc, phần tử HTML sẽ có giá trị css của frame cuối cùng
  • backwards: Sau khi hiệu ứng kết thúc, phần tử HTML sẽ có giá trị css của frame đầu tiên
  • both: Trước khi bắt đầu hiệu ứng, phần tử HTML sẽ có giá trị css của frame đầu. Sau khi hiệu ứng kết thúc thì nó sẽ có giá trị của frame cuối

Ví dụ sau sẽ cho các bạn thấy 3 phần tử với 3 giá trị animation-fill-mode khác nhau:

animation-fill-mode: forwards;

animation-fill-mode: backwards;

animation-fill-mode: both;

Ngừng hiệu ứng

Chúng ta có thể ngưng hiệu ứng đang chạy với thuộc tính animation-play-state, thuộc tính này chỉ có 2 giá trị mà thôi: runningpause. Khá đơn giản phải ko 🙂

Hướng của hiệu ứng

Ta cũng có thể tuỳ chỉnh hướng của hiệu ứng, tức là thay vì hiệu ứng chạy từ from đến to ta có thể cho chạy ngược lại với thuộc tính animation-direction. Thuộc tính này có các giá trị:

  • normal: hiệu ứng sẽ thực hiện như bình thường (từ from đến to)
  • reverse: hiệu ứng sẽ thực hiện ngược lại (từ to đến from)
  • alternate: hiệu ứng sẽ thực hiện theo chiều xuôi xong đến chiều ngược lại (tức là từ from đến to xong trở về from)
  • alternate-reverse: hiệu ứng sẽ thực hiện theo chiều ngược xong đến chiều xuôi (tức là to đến from xong trở về to)

animation-direction: normal;

animation-direction: reverse;

animation-direction: alternate;

animation-direction: alternate-reverse;

Phân bổ các khung hình theo thời gian

Thuộc tính animation-timing-function cho phép ta tuỳ chỉnh tốc độ của hiệu ứng. Chúng ta lưu ý là tốc độ tức thời của hiệu ứng ở những thời điểm có thể khác nhau. Hiện tại thì thuộc tính này có một số giá trị được xây dựng sẵn: ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end

Tuy nhiên, ta cũng có thể tự tạo chuỗi tốc độ nhanh hay chậm cho hiệu ứng theo ý muốn. Với hàm:

animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);

Hàm này sẽ nhận 4 tham số và dựa trên đó xây dựng chuỗi tốc độ tương ứng. Các bạn có thể tự mình tuỳ chỉnh và xem kết quả ở trang http://cubic-bezier.com/

Ngoài ra, hiệu ứng có thể được chia thành tập hợp các giá trị rời rạc với hàm step (amount of steps, direction). Ở đây amount of steps là số bước được chia ra, direction là hướng của hiệu ứng. Hơi rối rối nhưng để mình lấy một ví dụ và phân tích cho các bạn dễ hiểu:

Ở ví dụ trên, mình chia hiệu ứng thành 7 bước và hiệu ứng sẽ hướng về frame cuối cùng (to frame)

Ảnh sau minh hoạ cho các giá trị xây dựng sẵn như mình đã nói (linear, ease, ease-in, ease-out, ease-in-out)

Minh hoạ về thuộc tính animation-timing-function

animation-timing-function: ease;

animation-timing-function: ease-in;

animation-timing-function: ease-out;

animation-timing-function: ease-in-out;

animation-timing-function: linear;

animation-timing-function: steps(5, start);

animation-timing-function: steps(5, end);

animation-timing-function: step-start;

animation-timing-function: step-end;

animation-timing-function: cubic-bezier(0, 1.1, 0.8, 4);

Lời kết

Như vậy chúng ta đã nắm được các sử dụng thuộc tính animation của CSS3. Theo mình đây là thuộc tính hết sức thú vị. Với thuộc tính này chúng ta có thể làm 1 đoạn clip nhỏ 2D luôn đấy. Hẹn gặp lại các bạn ở những bài blog sau 🙂

Trần Ngọc Hạnh – JANETO

Nếu bạn thích bài viết này, hãy nhấp vào nút Like hoặc Share bên dưới để bạn bè cùng tham khảo nha!

TRUNG TÂM ĐÀO TẠO LẬP TRÌNH VIÊN JANETO


 0933067997 – 0933267337
 facebook.com/laptrinhvienio
 YouTube/laptrinhvienio
 tuyensinh@laptrinhvien.io
 Địa chỉ: Tầng 2 Tòa nhà The Morning Star – 57 Quốc Lộ 13, Phường 26, Quận Bình Thạnh, Tp. Hồ Chí Minh.

THAM KHẢO

  1. https://github.com/hanhtranjaneto/css-animation
24

Bình luận

0933 06 7997
0933 26 7337
tuyensinh@laptrinhvien.io