Hoạt ảnh trong CSS (CSS Animations) | Lập Trình Từ Đầu

CSS cho phép tạo hoạt ảnh cho các phần tử HTML mà không cần sử dụng JavaScript hoặc Flash bằng cách sử dụng các thuộc tính sau:

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

1. CSS Animations là gì?

Hoạt ảnh cho phép một phần tử dần dần thay đổi từ kiểu này sang kiểu khác

Bạn có thể thay đổi bao nhiêu thuộc tính CSS mà bạn muốn, bao nhiêu lần tùy ý

Để sử dụng hoạt ảnh CSS, trước tiên bạn phải chỉ định một số khung hình chính cho hoạt ảnh

Các khung hình chính giữ kiểu dáng mà phần tử sẽ có tại một số thời điểm nhất định

2. Các cách tạo hoạt ảnh trong HTML

2.1 Quy tắc @keyframes

Khi bạn chỉ định kiểu CSS bên trong quy tắc @keyframes, hoạt ảnh sẽ dần dần thay đổi từ kiểu hiện tại sang kiểu mới tại một khoảng thời gian nhất định

Để hoạt ảnh hoạt động, bạn phải liên kết hoạt ảnh với một phần tử

Ví dụ:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

Lưu ý: Thuộc tính animation-duration xác định thời lượng hoạt ảnh phải hoàn thành. Nếu thuộc tính animation-duration không được chỉ định, sẽ không có hoạt ảnh nào xảy ra, vì giá trị mặc định là 0s (0 giây).

Trong ví dụ trên, tôi đã chỉ định khi nào kiểu sẽ thay đổi bằng cách sử dụng các từ khóa “from” và “to” (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).

Chúng ta cũng có thể sử dụng phần trăm. Bằng cách sử dụng phần trăm, bạn có thể thêm bao nhiêu thay đổi kiểu tùy thích

Ví dụ:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

Ví dụ sau có sử dụng thêm nhiều thuộc tính CSS khác:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

2.2 Thuộc tính animation-delay

Thuộc tính animation-delay chỉ định thời gian trễ để bắt đầu hoạt ảnh

Ví dụ:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

Giá trị âm cũng được phép. Nếu sử dụng các giá trị âm, hoạt ảnh sẽ bắt đầu như thể nó đã phát được N giây

Ví dụ:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

2.3 Thuộc tính animation-iteration-count

Thuộc tính animation-iteration-count chỉ định số lần hoạt ảnh sẽ chạy

Ví dụ:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

Bạn có thể sử dụng giá trị “infinite” để làm cho hoạt ảnh tiếp tục mãi mãi

Ví dụ:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

2.4 Thuộc tính animation-direction

Thuộc tính animation-direction chỉ định xem hoạt ảnh nên được phát tới, lùi hay theo các chu kỳ thay thế

Thuộc tính animation-direction có thể có các giá trị sau:

normal – Hoạt ảnh được phát như bình thường (mặc định)
reverse – Hoạt ảnh được phát theo hướng ngược lại
alternate – Hoạt ảnh được phát về phía trước, sau đó được phát ngược lại
alternate-reverse – Hoạt ảnh được phát ngược trước, sau đó chuyển tiếp

Ví dụ:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

2.5 Thuộc tính animation-timing-function

Thuộc tính animation-timing-function chỉ định tốc độ của hoạt ảnh

Thuộc tính animation-timing-function có thể có các giá trị sau:

ease – Chỉ định một hoạt ảnh có bắt đầu chậm, sau đó nhanh, rồi kết thúc chậm (mặc định)
linear – Chỉ định một hoạt ảnh có cùng tốc độ từ đầu đến cuối
ease-in – Chỉ định một hoạt ảnh có khởi đầu chậm
ease-out – Chỉ định một hoạt ảnh có kết thúc chậm
easy-in-out – Chỉ định một hoạt ảnh có phần bắt đầu và kết thúc chậm
cubic-bezier (n, n, n, n) – Cho phép bạn xác định các giá trị của riêng mình

Ví dụ:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

2.6 Thuộc tính animation-fill-mode

Hoạt ảnh trong CSS không ảnh hưởng đến một phần tử trước khi khung hình chính đầu tiên được phát hoặc sau khi khung hình chính cuối cùng được phát. Thuộc tính animation-fill-mode có thể ghi đè hành vi này

Thuộc tính animation-fill-mode chỉ định kiểu cho phần tử đích khi hoạt ảnh không phát (trước khi bắt đầu, sau khi kết thúc hoặc cả hai)

Thuộc tính animation-fill-mode có thể có các giá trị sau:

none – Giá trị mặc định. Hoạt ảnh sẽ không áp dụng bất kỳ kiểu nào cho phần tử trước hoặc sau khi phần tử đang thực thi
forwards – Phần tử sẽ giữ lại các giá trị kiểu được đặt bởi khung hình chính cuối cùng (phụ thuộc vào hướng hoạt ảnh và số lần lặp lại hoạt ảnh)
backwards – Phần tử sẽ nhận các giá trị kiểu được đặt bởi khung hình chính đầu tiên (phụ thuộc vào hướng hoạt ảnh) và giữ lại giá trị này trong khoảng thời gian trễ hoạt ảnh
both – Hoạt ảnh sẽ tuân theo các quy tắc cho cả tiến và lùi, mở rộng các thuộc tính hoạt ảnh theo cả hai hướng

Ví dụ:

phần tử <div> giữ lại các giá trị kiểu từ khung hình chính cuối cùng khi hoạt ảnh kết thúc:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

phần tử <div> nhận các giá trị kiểu được đặt bởi khung hình chính đầu tiên trước khi hoạt ảnh bắt đầu (trong khoảng thời gian trễ hoạt ảnh):

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

phần tử <div> nhận các giá trị kiểu được đặt bởi khung hình chính đầu tiên trước khi hoạt ảnh bắt đầu và giữ lại các giá trị kiểu từ khung hình chính cuối cùng khi hoạt ảnh kết thúc:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

2.7 Viết tắt các thuộc tính hoạt ảnh

Bạn có thể sử dụng tất cả các thuộc tính hoạt ảnh bằng cách sử dụng thuộc tính animation

Ví dụ:

See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.

3. Các trình duyệt hỗ trợ

Thuộc tính