Hoạt ảnh animation trong css

CSS cho phép chúng ta tạo hoạt ảnh cho các phần tử HTML mà không cần phải sử dụng JavaScript hoặc Flash!

CSS

 

Trong bài đọc này, chúng ta sẽ tìm hiểu về 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

Hỗ trợ trình duyệt

Các số trong bảng bên dưới chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.

Property
 
 
 
 
 

@keyframes
43.0
10.0
16.0
9.0
30.0

animation-name
43.0
10.0
16.0
9.0
30.0

animation-duration
43.0
10.0
16.0
9.0
30.0

animation-delay
43.0
10.0
16.0
9.0
30.0

animation-iteration-count
43.0
10.0
16.0
9.0
30.0

animation-direction
43.0
10.0
16.0
9.0
30.0

animation-timing-function
43.0
10.0
16.0
9.0
30.0

animation-fill-mode
43.0
10.0
16.0
9.0
30.0

animation
43.0
10.0
16.0
9.0
30.0

CSS Animations là gì?

Thuộc tính CSS animation cho phép một phần tử dần dần thay đổi từ kiểu này sang kiểu khác. Chúng ta có thể thay đổi bao nhiêu thuộc tính CSS và thay đổi bao nhiêu lần tùy ý.

Để sử dụng hoạt ảnh CSS, trước tiên chúng ta phải chỉ định một số khung hình chính cho hoạt ảnh. Các khung hình chính sẽ giữ kiểu dáng mà phần tử sẽ có tại một số thời điểm nhất định.

Quy tắt @keyframes

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

Để hoạt ảnh hoạt động, chúng ta phải liên kết hoạt ảnh với một phần tử HTML.

Ví dụ sau liên kết hoạt ảnh “example” với phần tử <div>. Hoạt ảnh sẽ kéo dài trong 4 giây và nó sẽ dần dần thay đổi màu nền của phần tử <div> từ “red” thành “yellow”.

Ví dụ

/* Code animation */
@keyframes example 
{
  
from
 {
background-color
: 
red;
}
  
to
 {
background-color
: 
yellow;
}
}

/* Phần tử áp dụng hiệu ứng animation */
div
 {
 
 width
: 
100px;
  height
: 
100px;
  background-color
: 
red;
  animation-name
: 
example;
  animation-duration
: 
5s;
}

Xem kết quả

Lưu ý: Thuộc tính animation-duration xác định khoảng thời gian bao lâu một hình ảnh động cần thực hiện để 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, chúng ta đã 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)).

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

Ví dụ sau sẽ thay đổi màu nền của phần tử <div> khi hoạt ảnh hoàn thành 25%, hoàn thành 50% và một lần nữa khi hoạt ảnh hoàn thành 100%.

Ví dụ

/* Code animation */
@keyframes example 
{
  0% {
background-color
: 
red;
}
  25% {
background-color
: 
yellow;
}
  50% {
background-color
: 
green;
}
  100% {
background-color
: 
blue;
}
}

/* Phần tử áp dụng hiệu ứng animation */
div
 {
 
 width
: 
100px;
  height
: 
100px;
  background-color
: 
red;
  animation-name
: 
example;
  animation-duration
: 
5s;
}

Xem kết quả

Ví dụ sau sẽ thay đổi cả màu nền và vị trí của phần tử <div> khi hoạt ảnh hoàn thành 25%, hoàn thành 50% và một lần nữa khi hoạt ảnh hoàn thành 100%.

Ví dụ

/* Code animation */
@keyframes example
 {
 
 0%
   {
background-color
:
red; left
:
0px; top
:
0px;
}
 
 25%
  {
background-color
:
yellow; left
:
200px; top
:
0px;
}
  
50%
  {
background-color
:
blue; left
:
200px; top
:
200px;
}
 
 75%
  {
background-color
:
green; left
:
0px; top
:
200px;
}
 
 100%
 {
background-color
:
red; left
:
0px; top
:
0px;
}
}

/* Phần tử áp dụng hiệu ứng animation */
div
 {
  width
: 
100px;
  height
: 
100px;
  position
: 
relative;
  background-color
: 
red;
  animation-name
: 
example;
  animation-duration
:
 4s;
}

Xem kết quả

Thuộc tính CSS animation-delay

Thuộc tính animation-delay quy định cụ thể thời gian delay trước khi bắt đầu của một hình ảnh động.

Ví dụ sau hoạt ảnh chờ 2s trước khi bắt đầu chạy hiệu ứng.

Ví dụ

div
 {
  
width
: 
100px;
  height
: 
100px;
  position
: 
relative;
  background-color
:
 red;
  animation-name
:
 example;
  animation-duration
: 
5s;
  animation-delay
: 
2s;
}

Xem kết quả

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

Trong ví dụ sau, hoạt ảnh sẽ bắt đầu như thể nó đã chạy được 2 giây.

Ví dụ

div
 {
  
width
: 
100px;
  height
: 
100px;
  position
: 
relative;
  background-color
:
 red;
  animation-name
:
 example;
  animation-duration
: 
5s;
  animation-delay
: 
-2s;
}

Xem kết quả

Quy định số lần hoạt ảnh sẽ chạy

Thuộc tính animation-iteration-count quy định cụ thể số lần hoạt ảnh sẽ chạy.

Ví dụ sau hoạt ảnh sẽ chạy 3 lần trước khi nó dừng lại.

Ví dụ

div
 {
  
width
:
100px;
    height
:
100px;
    position
:
relative;
    background-color
:
red;
    animation-name
:
example;
    animation-duration
:
5s;
    animation-iteration-count
:
3;
}

Xem kết quả

Ví dụ sau sử dụng giá trị “infinite” để làm cho hoạt ảnh chạy mãi mãi

Ví dụ

div
 {
  
width
:
100px;
    height
:
100px;
    position
:
relative;
    background-color
:
red;
    animation-name
:
example;
    animation-duration
:
5s;
    animation-iteration-count
:
infinite;
}

Xem kết quả

Thuộc tính CSS animation-direction

Thuộc tính animation-direction quy định cụ thể một phần tử chạy hiệu ứng hoạt ảnh sẽ chạy về phía trước, hay chạy ngược lại hoặc chạy một chu kỳ thay thế khác.

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

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

Ví dụ sau sẽ chạy hoạt ảnh theo hướng ngược lại (reverse)

Ví dụ

div
 {
   
 width
:
100px;
    height
:
100px;
    position
:
relative;
    background-color
:
red;
    animation-name
:
example;
    animation-duration
:
5s;
    animation-direction
:
reverse;
}

Xem kết quả

Ví dụ sau sử dụng giá trị “alternate” để làm cho hoạt ảnh chạy về phía trước, sau đó chạy ngược lại

Ví dụ

div
 {
   
 width
:
100px;
    height
:
100px;
    position
:
relative;
    background-color
:
red;
    animation-name
:
example;
    animation-duration
:
5s;
    animation-iteration-count
:
2;
    animation-direction
:
alternate;
}

Xem kết quả

Ví dụ sau sử dụng giá trị “alternate-reverse” để làm cho hoạt ảnh chạy ngược trước, sau đó chuyển tiếp

Ví dụ

div
 {
   
 width
:
100px;
    height
:
100px;
    position
:
relative;
    background-color
:
red;
    animation-name
:
example;
    animation-duration
:
5s;
    animation-iteration-count
:
2;
    animation-direction
:
alternate-reverse;
}

Xem kết quả

Chỉ định tùy biến tốc độ của Hoạt ảnh

Thuộc tính animation-timing-function quy định các tùy biến tốc độ của hoạt ảnh.

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

• ease – Chỉ định một hoạt ảnh có bắt đầu chậm, sau đó nhanh, sau đó kết thúc chậm (đây là mặc định)
• linear – Chỉ định một hoạt ảnh với cùng tốc độ từ đầu đến cuối
• ease-in – Chỉ định một hoạt ảnh có khởi động chậm
• ease-out – Chỉ định một hoạt ảnh có kết thúc chậm
• ease-in-out – Chỉ định một hoạt ảnh có 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 trong một hàm bậc ba

Ví dụ sau đây cho thấy một số tùy biến tốc độ khác nhau có thể được sử dụng.

Ví dụ

#div1
 {
animation-timing-function
: 
linear;
}
#div2
 {
animation-timing-function
: 
ease;
}
#div3
 {
animation-timing-function
: 
ease-in;
}
#div4
 {
animation-timing-function
: 
ease-out;
}
#div5
 {
animation-timing-function
: 
ease-in-out;
}

Xem kết quả

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

Hoạt ảnh 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 quy định cụ thể một kiểu cho các phần tử mục tiêu khi các hoạt ảnh được dừng chạy (trước khi nó bắt đầu, sau khi nó kết thúc, hoặc cả hai).

Thuộc tính animation-fill-mode 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ử 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ễ của 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ụ sau cho phép 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.

Ví dụ

div
 {
  
width
: 
100px;
  height
: 
100px;
  background
: 
red;
  position
: 
relative;
  animation-name
: 
example;
  animation-duration
: 
3s;  
  animation-fill-mode
: 
forwards;
}

Xem kết quả

Ví dụ sau cho phép 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).

Ví dụ

div
 {
  
width
: 
100px;
  height
: 
100px;
  background
: 
red;
  position
: 
relative;
  animation-name
: 
example;
  animation-duration
: 
3s;
  animation-delay
:
 2s;  
  animation-fill-mode
: 
backwards;
}

Xem kết quả

Ví dụ sau cho phép 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.

Ví dụ

div
 {
  
width
: 
100px;
  height
: 
100px;
  background
: 
red;
  position
: 
relative;
  animation-name
: 
example;
  animation-duration
: 
3s;
  animation-delay
:
 2s;  
  animation-fill-mode
: 
both;
}

Xem kết quả

Thuộc tính CSS animation viết tắt

Ví dụ dưới đây sử dụng sáu thuộc tính hoạt ảnh.

Ví dụ

div
 {
  
animation-name
: 
example;
  animation-duration
: 
5s;
  animation-timing-function
: 
linear;
  animation-delay
: 
2s;
  animation-iteration-count
: 
infinite;
  animation-direction
: 
alternate;
}

Hiệu ứng hoạt ảnh tương tự như trên có thể được viết tắt bằng cách sử dụng thuộc tính duy nhất animation

Ví dụ

div
 {
  
animation
: 
example 5s linear 2s infinite alternate;
}

Xem kết quả