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 cho biết 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 tùy ý 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ể.

@keyframes quy tắc

Nếu bạn trong @keyframes Trong quy tắc, chúng ta đã xác đị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ào một phần tử nào đó.

Ví dụ dưới đây sẽ gắn animation "example" vào 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ã hiệu ứng hoạt hình */
@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 cầ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ã hiệu ứng hoạt hình */
@keyframes example {
  0%   {màu nền: đỏ;}
  25%  {màu nền: vàng;}
  50%  {background-color: blue;}
  100% {background-color: green;}
{}
/* Đối tượng áp dụng hiệu ứng hoạt hình */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
{}

Thử ngay

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

Mô hình

/* Mã hiệu ứng hoạt hình */
@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;}
{}
/* Đối tượng áp dụng hiệu ứng hoạt hình */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
{}

Thử ngay

Chậm trễ hiệu ứng hoạt hình

animation-delay Thuộc tính quy định thời gian chậm trễ bắt đầu của hiệu ứng hoạt hình.

Dưới đây là ví dụ có 2 giây chậm trễ trước khi bắt đầu hiệu ứng hoạt hình:

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, hiệu ứng hoạt hình sẽ bắt đầu phát như thể nó đã phát N giây.

Trong ví dụ sau, hiệu ứng hoạt hình sẽ bắt đầu phát như thể nó đã phát trong 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 hiệu ứng hoạt hình nên chạy

animation-iteration-count Thuộc tính xác định số lần hiệu ứng hoạt hình nên chạy.

Dưới đây là ví dụ chạy hiệu ứng hoạt hình 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 hiệu ứng hoạt hình kéo dài 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 ngược lại liên tục hiệu ứng hoạt hình

animation-direction Thuộc tính xác định hiệu ứng hoạt hình là chạy sang trước, chạy ngược lại hay chạy ngược lại liên tục.

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

  • normal - Hiệu ứng hoạt hình chạy bình thường (sang trước). Giá trị mặc định
  • reverse - Hiệu ứng hoạt hình chạy ngược lại (ngược lại)
  • alternate - Hiệu ứng hoạt hình chạy sang trước trước, sau đó chạy ngược lại
  • alternate-reverse - Hiệu ứng hoạt hình chạy ngược lại trước, sau đó chạy sang trước

Ví dụ sau sẽ chạy hiệu ứng hoạt hình 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 hiệu ứng hoạt hình chạy sang 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 hiệu ứng hoạt hình chạy ngược lại trước, sau đó chạy sang 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 animation

animation-timing-function Thuộc tính quy định đường cong tốc độ của animation.

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

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

Dưới đây là một số ví dụ về các đường cong tốc độ khác nhau 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ế độ lấp đầy animation

CSS animation sẽ không ảnh hưởng đến element trước khi khung chốt đầu tiên được phát hoặc sau khi khung chốt cuối cùng được phát.animation-fill-mode thuộc tính có thể che phủ hành vi này.

Khi animation không được phát lại (trước khi bắt đầu, sau khi kết thúc, hoặc cả hai),animation-fill-mode Thuộc tính quy định phong cách của element 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. Animation sẽ không áp dụng bất kỳ phong cách nào cho element trước khi hoặc sau khi thực thi.
  • forwards - Element sẽ giữ giá trị phong cách được đặt bởi khung chốt cuối cùng (phụ thuộc vào animation-direction và animation-iteration-count).
  • backwards - Element sẽ nhận 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 suốt thời gian delay của animation.
  • both - Animation sẽ tuân theo cả các quy tắc tiến và lùi, từ đó mở rộng thuộc tính animation theo hai hướng.

Dưới đây là ví dụ để <div> giữ lại giá trị phong cách từ khung chốt 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-fill-mode: forwards;
{}

Thử ngay

Ví dụ sau này sẽ làm cho phần tử <div> nhận giá trị phong cách của keyframe đầu tiên trước khi animation bắt đầu (trong thời gian chậm 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ụ sau này sẽ làm cho phần tử <div> nhận giá trị phong cách của keyframe đầu tiên trước khi animation bắt đầu, và giữ giá trị phong cách của keyframe 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ụ sau 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 tương tự 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 thời gian chậm trễ để animation bắt đầu.
animation-direction Định nghĩa animation phát trước, phát sau hay phát luân phiên.
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).
animation-iteration-count Định nghĩa số lần animation cần phát lại.
animation-name Định nghĩa tên của animation @keyframes.
animation-play-state Định nghĩa animation là chạy hay dừng lại.
animation-timing-function Định nghĩa đường cong tốc độ của animation.