Animation và @keyframes




Animation và @keyframes là một bộ thuộc tính đi chung với nhau dùng để tạo hiệu ứng chuyển động, 2 thuộc tính này được kỳ vọng giảm tải lượng lớn source code Javascript.

Phần lớn trang web gần đây sử dụng animation và @keyframes khá nhiều để tạo hiệu ứng thêm cho trang web, đặc biệt những trang Landing page.

Cấu trúc

Cần phải có đầy đủ cả 2 thuộc tính animation và @keyframes.

Cấu trúc  animation cơ bản

tag { 
    animation: [animation-name] [duration]; 
} 
@keyframes animation-name {
}
																

Cấu trúc  animation tổng quát

tag { 
    animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
} 
@keyframes animation-name { 
}

@keyframes  có 2 cấu trúc như sau (tùy vào mục đích sử dụng):

Cấu trúc  @keyframes khai báo giá trị đầu (from) - cuối (to):

@keyframes animation-name {
    from { } 
    to { } 
}						

Cấu trúc  @keyframes khai báo các mốc giá trị đặc biệt:

@keyframes animation-name {
    0% { }
    10% { }
    40% { }
    ... 
    100% { } 
}				

Các giá trị của  animation :

Giá trị	Đơn vị	VD	Mô tả
animation-name	Tên bất kỳ, không khoảng cách.	boxAnimation	Xác định tên cho một animation, bắt buộc trùng với tên khai báo tại  @keyframes.
duration	Thời gian	5s	Thời gian để hoàn thành một chuyển động, mặc định là 0s.
timing	linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)	ease	Xác định loại hiệu ứng chuyển động.
delay	Thời gian	2s	Cho biết sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0.
interaction-count	Số tự nhiên infinite		Số lần thực hiện chuyển động, mặc định 1 lần. Giá trị infinite là lập vô hạn.
direction	normal alternate	alternate	Cho biết chuyển động có đảo ngược ở chu kỳ tiếp theo hay không, mặc định là normal.

Cách sử dụng

Trước hết, chúng ta tạo một đoạn HTML đơn giản như dưới đây, tô màu cho thẻ <p> để dễ nhìn thấy chuyển động của nó.

Đầu tiên, chúng ta sẽ tạo một vài chuyển động đơn giản, để các bạn hình dung được rõ về animation:

Ví dụ trên, ta cho thuộc tính animation có 3 giá trị:

• [animation-name]: tên này cần phải trùng với @keyframes.
• [duration]: một chu kỳ chuyển động trong 5s.
• [interaction-count]: cho chuyển động lặp vô hạn.

Ví dụ thêm về animation và @keyframes

Animation lặp lại và đổi chiều

Animation theo vị trí

Animation với transform

Animation kết hợp nhiều giá trị

Animation và @keyframes theo phần trăm

Ngoài các ví dụ trên, animation còn có thuộc tính riêng cho từng giá trị, chúng ta sẽ tìm hiểu về nó ở các blog tiếp theo nhé.