CSS Animation

CSS Animation

CSS có thể thực hiện hiệu ứng animation của phần tử HTML mà không cần sử dụng JavaScript hoặc Flash!

CSS

Trong chương này, bạn sẽ học 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ủa animation

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Thuộc tính Chrome IE Firefox Safari Opera
@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

Animation CSS là gì?

Animation giúp phần tử từ từ chuyển từ giao diện này sang giao diện khác.

Bạn có thể thay đổi ngẫu nhiên bất kỳ số lượng thuộc tính CSS nào.

Để sử dụng animation CSS, bạn phải trước tiên chỉ định một số keyframe cho animation.

Các keyframe chứa giao diện mà phần tử có vào một thời điểm cụ thể.

Quy tắc @keyframes

Nếu bạn trong @keyframes Trong quy tắc, quy định giao diện CSS, animation sẽ từ từ thay đổi từ giao diện hiện tại sang giao diện mới trong một thời gian cụ thể.

Để animation hoạt động, bạn phải gắn animation với một phần tử nào đó.

Ví dụ dưới đây sẽ gắn animation "example" với phần tử <div>. Animation sẽ kéo dài 4 giây, trong khi đó màu nền của phần tử <div> sẽ từ đỏ dần chuyển sang vàng:

Mô hình

/* Mã animation */
@keyframes example {
  from {màu nền: đỏ;}
  to {màu nền: vàng;}
}
/* Áp dụng hiệu ứng animation cho phần tử này */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Thử ngay

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

Trong ví dụ trên, bằng cách sử dụng từ khóa "from" và "to" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)), chúng ta đã thiết lập khi nào giao diện thay đổi.

Bạn cũng có thể sử dụng giá trị phần trăm. Bằng cách sử dụng phần trăm, bạn có thể thêm bất kỳ số lượng thay đổi giao diện nào bạn muốn.

Ví dụ dưới đây sẽ thay đổi màu nền của phần tử <div> khi animation hoàn thành 25%, hoàn thành 50% và animation hoàn thành 100%:

Mô hình

/* Mã animation */
@keyframes example {
  0%   {màu nền: đỏ;}
  25%  {màu nền: vàng;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Áp dụng animation cho phần tử */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Thử ngay

Dưới đây là ví dụ sẽ thay đổi màu nền và vị trí của phần tử <div> khi animation hoàn thành 25%, 50% và animation hoàn thành 100%:

Mô hình

/* Mã 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;}
}
/* Áp dụng animation cho phần tử */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Thử ngay

Chậm trễ animation

animation-delay Thuộc tính quy định thời gian chậm trễ bắt đầu animation.

Dưới đây là ví dụ có 2 giây chậm trễ trước khi bắt đầu animation:

Mô hình

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

Thử ngay

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

Trong ví dụ sau, animation sẽ bắt đầu phát như thể nó đã phát 2 giây:

Mô hình

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

Thử ngay

Đặt số lần animation nên chạy

animation-iteration-count Thuộc tính xác định số lần animation nên chạy.

Dưới đây là ví dụ để chạy animation 3 lần trước khi dừng:

Mô hình

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

Thử ngay

Dưới đây là ví dụ sử dụng giá trị "infinite" để làm cho animation tiếp tục mãi mãi:

Mô hình

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

Thử ngay

Chạy ngược lại hoặc lặp lại animation

animation-direction Thuộc tính xác định animation chạy về phía trước, chạy ngược lại hay chạy theo cách lặp lại.

animation-direction Thuộc tính có thể chấp nhận các giá trị sau:

  • normal - Animation chạy bình thường (về phía trước). Giá trị mặc định
  • reverse - Animation chạy ngược lại (ngược lại)
  • alternate - Animation chạy về phía trước trước, sau đó chạy ngược lại
  • alternate-reverse - Animation chạy ngược lại trước, sau đó chạy về phía trước

Ví dụ sau sẽ chạy animation theo hướng ngược lại (ngược lại):

Mô hình

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

Thử ngay

Dưới đây là ví dụ sử dụng giá trị "alternate" để làm cho animation chạy về phía trước trước, sau đó chạy ngược lại:

Mô hình

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

Thử ngay

Dưới đây là ví dụ sử dụng giá trị "alternate-reverse" để làm cho animation chạy ngược lại trước, sau đó chạy về phía trước:

Mô hình

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

Thử ngay

Định nghĩa đường cong tốc độ của hiệu ứng hoạt hình

animation-timing-function Thuộc tính quy định đường cong tốc độ của hiệu ứng hoạt hình.

animation-timing-function Thuộc tính có thể chấp nhận các giá trị sau:

  • ease - Định nghĩa hiệu ứng hoạt hình bắt đầu chậm hơn, sau đó tăng tốc, sau đó kết thúc chậm hơn (mặc định)
  • linear - Định nghĩa hiệu ứng hoạt hình có tốc độ từ đầu đến cuối giống nhau
  • ease-in - Định nghĩa hiệu ứng hoạt hình bắt đầu chậm hơn
  • ease-out - Định nghĩa hiệu ứng hoạt hình kết thúc chậm hơn
  • ease-in-out - Định nghĩa hiệu ứng hoạt hình bắt đầu và kết thúc chậm hơn
  • cubic-bezier(n,n,n,n) - Chạy giá trị của bạn trong hàm ba điểm Bezier

Dưới đây là một số ví dụ về các đường cong tốc độ có thể sử dụng:

Mô hình

#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;}

Thử ngay

Định nghĩa chế độ điền đầy cho hiệu ứng hoạt hình

CSS hiệu ứng hoạt hình sẽ không ảnh hưởng đến yếu tố trước khi phát sóng khung chốt đầu tiên hoặc sau khi phát sóng khung chốt cuối cùng.animation-fill-mode Thuộc tính có thể che盖这种行为.

Khi không phát triển hiệu ứng hoạt hình (trước khi bắt đầu, sau khi kết thúc, hoặc cả hai đều kết thúc),animation-fill-mode Thuộc tính quy định phong cách của yếu tố mục tiêu.

Thuộc tính animation-fill-mode có thể chấp nhận các giá trị sau:

  • none - Giá trị mặc định. Hiệu ứng hoạt hình sẽ không áp dụng bất kỳ phong cách nào cho yếu tố trước khi thực hiện hoặc sau khi thực hiện.
  • forwards - Yếu tố sẽ giữ lại giá trị phong cách được đặt bởi khung chốt cuối cùng (tuỳ thuộc vào animation-direction và animation-iteration-count).
  • backwards - Yếu tố sẽ lấy giá trị phong cách được đặt bởi khung chốt đầu tiên (tùy thuộc vào animation-direction) và giữ giá trị này trong thời gian chờ của hiệu ứng hoạt hình.
  • both - Hiệu ứng hoạt hình sẽ tuân theo cả các quy tắc tiến và lùi, từ đó mở rộng thuộc tính hiệu ứng hoạt hình theo hai hướng.

Dưới đây là ví dụ để <div> yếu tố giữ lại giá trị phong cách từ khung chốt cuối cùng sau khi hiệu ứng hoạt hình kết thúc:

Mô hình

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

Thử ngay

Ví dụ dưới đây sẽ làm cho phần tử <div> nhận giá trị phong cách của khung chìa khóa đầu tiên trong thời gian trễ của animation:

Mô hình

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

Thử ngay

Ví dụ dưới đây sẽ làm cho phần tử <div> nhận giá trị phong cách của khung chìa khóa đầu tiên trước khi animation bắt đầu, và giữ giá trị phong cách của khung chìa khóa cuối cùng sau khi animation kết thúc:

Mô hình

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

Thử ngay

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

Ví dụ dưới đây sử dụng sáu thuộc tính animation:

Mô hình

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

Thử ngay

Sử dụng viết tắt animation Thuộc tính cũng có thể tạo ra hiệu ứng animation như ví dụ trên:

Mô hình

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

Thử ngay

Thuộc tính animation CSS

Bảng dưới đây liệt kê các quy tắc @keyframes và tất cả các thuộc tính animation CSS:

Thuộc tính Mô tả
@keyframes Định nghĩa chế độ animation.
animation Đặt thuộc tính viết tắt cho tất cả các thuộc tính animation.
animation-delay Định nghĩa độ trễ bắt đầu của animation.
animation-direction Định nghĩa animation là phát trước, phát sau hay phát lặp lại.
animation-duration Định nghĩa thời gian cần để animation hoàn thành một chu kỳ.
animation-fill-mode Định nghĩa phong cách của phần tử khi animation không được phát (trước khi bắt đầu, sau khi kết thúc, hoặc cả hai cùng lúc).
animation-iteration-count Định nghĩa số lần animation cần phát chơi.
animation-name Định nghĩa tên của animation @keyframes.
animation-play-state Define whether the animation is running or paused.
animation-timing-function Define the speed curve of the animation.