Ảnh động

Hoạt ảnh là một cách tuyệt vời để làm nổi bật các yếu tố tương tác và thêm sự quan tâm và thú vị cho các thiết kế của mình. Trong mô-đun này, hãy tìm hiểu cách thêm và điều khiển hiệu ứng ảnh động bằng CSS.

Đôi khi, bạn sẽ thấy những trình trợ giúp nhỏ trên giao diện cung cấp một số thông tin hữu ích về phần mà họ đang xem khi bạn nhấp vào quảng cáo. Những quảng cáo này thường có ảnh động nhấp nháy để khéo léo cho bạn biết rằng thông tin luôn ở đó và tương tác với. Mô-đun này hướng dẫn bạn cách tạo trình trợ giúp đó cũng như các ảnh động khác bằng cách sử dụng Dịch vụ so sánh giá (CSS).

Biểu tượng nhấp nháy là một cách để đảm bảo rằng người dùng hãy chú ý đến những thông tin quan trọng.

Bạn có thể sử dụng CSS để đặt chuỗi ảnh động bằng các khung hình chính. Các trình tự này có thể là ảnh động cơ bản, ảnh động một trạng thái hoặc chuỗi phức tạp theo thời gian.

Khung hình chính là gì?

Trong hầu hết các công cụ ảnh động, khung hình chính là cơ chế bạn dùng để gán ảnh động các trạng thái thành dấu thời gian trên dòng thời gian.

Ví dụ: dưới đây là dòng thời gian cho "trình trợ giúp" phát lúc . Ảnh động này chạy trong 1 giây và có 2 trạng thái.

Các trạng thái của ảnh động dạng xung trong khung thời gian 1 giây
Các trạng thái của ảnh động phát sáng.

Mỗi trạng thái ảnh động này bắt đầu và kết thúc tại một điểm cụ thể. Bạn ánh xạ những thành phần này trên dòng thời gian bằng các khung hình chính.

Sơ đồ tương tự như trước, nhưng lần này, có các khung hình chính
Ảnh động nhấp nháy với các khung hình chính.

@keyframes

Hỗ trợ trình duyệt

  • Chrome: 43.
  • Cạnh: 12.
  • Firefox: 16.
  • Safari: 9.

Nguồn

Dịch vụ so sánh giá (CSS) @keyframes đều dựa trên cùng một khái niệm như khung hình chính hoạt ảnh.

Dưới đây là ví dụ với 2 trạng thái:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

Phần quan trọng đầu tiên là mã nhận dạng tuỳ chỉnh (custom-ident), tên của quy tắc khung hình chính. Giá trị nhận dạng trong ví dụ này là my-animation. Giá trị nhận dạng tuỳ chỉnh hoạt động như tên hàm, cho phép bạn tham chiếu quy tắc khung hình chính ở nơi khác trong mã CSS.

Bên trong quy tắc khung hình chính, from và to là các từ khóa đại diện cho 0% và 100%, là phần bắt đầu và kết thúc của ảnh động. Bạn có thể tạo lại cùng một quy tắc như sau:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

Bạn có thể thêm bao nhiêu vị trí tùy thích trong suốt khung thời gian. Trong ví dụ về trình trợ giúp chạy, có hai trạng thái chuyển thành hai khung hình chính. Tức là bạn có hai vị trí bên trong quy tắc khung hình chính để thể hiện sự thay đổi cho từng khung hình chính này.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}
Thử chỉnh sửa quy tắc pulse để xem ảnh động thay đổi.

Các thuộc tính animation

Hỗ trợ trình duyệt

  • Chrome: 43.
  • Cạnh: 12.
  • Firefox: 16.
  • Safari: 9.

Nguồn

Để sử dụng @keyframes trong quy tắc CSS, bạn có thể xác định các ảnh động khác nhau từng thuộc tính riêng lẻ hoặc sử dụng animation thuộc tính viết tắt.

animation-duration

Hỗ trợ trình duyệt

  • Chrome: 43.
  • Cạnh: 12.
  • Firefox: 16.
  • Safari: 9.

Nguồn

.my-element {
    animation-duration: 10s;
}

animation-duration xác định khoảng thời gian @keyframes dưới dạng giá trị thời gian. Giá trị mặc định là 0 giây, nghĩa là ảnh động vẫn chạy nhưng sẽ quá để bạn xem nhanh. Bạn không thể sử dụng giá trị thời gian âm.

animation-timing-function

Hỗ trợ trình duyệt

  • Chrome: 43.
  • Cạnh: 12.
  • Firefox: 16.
  • Safari: 9.

Nguồn

Để giúp tạo lại chuyển động tự nhiên trong ảnh động, bạn có thể sử dụng các hàm thời gian tính tốc độ của ảnh động tại mỗi điểm. Các giá trị được tính thường cong, làm cho ảnh động chạy ở nhiều tốc độ trong suốt thời gian animation-duration và làm cho phần tử có vẻ nảy lên nếu trình duyệt tính một giá trị vượt quá các giá trị được xác định trong @keyframes.

Có một số từ khoá có sẵn làm giá trị đặt trước trong CSS và được dùng làm giá trị cho animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}
Thử thay đổi hàm thời gian cho ảnh động sử dụng.

Các giá trị hàm gia tốc có vẻ như đường cong vì gia tốc được tính bằng cách sử dụng Đường cong Bézier, một loại hàm dùng để lập mô hình vận tốc. Mỗi thời gian từ khoá hàm, chẳng hạn như ease, tham chiếu đến đường cong Bézier được xác định trước. Trong CSS, bạn có thể trực tiếp xác định đường cong Bézier bằng cách sử dụng hàm cubic-bezier(), chấp nhận 4 giá trị số: x1, y1, x2, y2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

Các giá trị này vẽ biểu đồ từng phần của đường cong dọc theo trục X và Y.

Đường cong Bézier trên biểu đồ tiến trình so với biểu đồ thời gian
Ví dụ về đường cong Bézier.

Việc hiểu về đường cong Bézier rất phức tạp. Các công cụ trực quan như công cụ này trình tạo của Lea Verou, rất hữu ích.

Hàm gia tốc steps

Đôi khi, bạn có thể muốn kiểm soát chi tiết hơn ảnh động bằng cách di chuyển theo từng khoảng thời gian thay vì dọc theo một đường cong. Hàm gia tốc steps() cho phép bạn chia dòng thời gian thành các khoảng thời gian bằng nhau đã xác định.

.my-element {
    animation-timing-function: steps(10, end);
}

Đối số đầu tiên là bước số. Nếu có cùng số khung hình chính theo các bước, mỗi khung hình chính phát theo trình tự trong thời lượng chính xác mà không có sự chuyển đổi giữa các trạng thái. Nếu có ít khung hình chính hơn số bước, trình duyệt sẽ thêm các bước giữa khung hình chính phụ thuộc vào đối số thứ hai.

Đối số thứ hai là hướng. Nếu bạn đặt chính sách này thành end, thì đây sẽ là mặc định, các bước này sẽ kết thúc ở cuối dòng thời gian của bạn. Nếu bạn đặt chính sách này thành start, bước đầu tiên của ảnh động hoàn tất ngay khi nó bắt đầu, có nghĩa là kết thúc sớm hơn end một bước.

So sánh ảnh động có và không theo bước.

animation-iteration-count

Hỗ trợ trình duyệt

  • Chrome: 43.
  • Cạnh: 12.
  • Firefox: 16.
  • Safari: 9.

Nguồn

.my-element {
    animation-iteration-count: 10;
}

Số Animation-iteration-count xác định số lần dòng thời gian @keyframes sẽ chạy trong ảnh động. Theo mặc định, đây là 1, nghĩa là ảnh động sẽ dừng khi đến cuối dòng thời gian của bạn. Giá trị này không được là số âm.

Hãy thử thay đổi số lần lặp lại cho ảnh động này.

Để tạo vòng lặp ảnh động, hãy đặt số lần lặp thành infinite. Đây là cách ảnh động nhấp nháy từ đầu bài học này.

Ảnh động nhấp nháy lặp lại vô hạn.

animation-direction

Hỗ trợ trình duyệt

  • Chrome: 43.
  • Cạnh: 12.
  • Firefox: 16.
  • Safari: 9.

Nguồn

.my-element {
    animation-direction: reverse;
}

Bạn có thể thiết lập hướng dòng thời gian chạy trên khung hình chính bằng animation-direction, nhận các giá trị sau:

  • normal: giá trị mặc định sẽ chuyển tiếp.
  • reverse: chạy lùi theo dòng thời gian.
  • alternate: đối với mỗi lần lặp lại ảnh động, dòng thời gian sẽ thay đổi giữa chạy đi và chạy lùi.
  • alternate-reverse: Giống như alternate, nhưng ảnh động bắt đầu bằng dòng thời gian chạy lùi.
Thử thay đổi hướng ảnh động.

animation-delay

Hỗ trợ trình duyệt

  • Chrome: 43.
  • Cạnh: 12.
  • Firefox: 16.
  • Safari: 9.

Nguồn

.my-element {
    animation-delay: 5s;
}

Độ trễ ảnh động thuộc tính xác định khoảng thời gian trình duyệt chờ trước khi bắt đầu ảnh động. Giống như thuộc tính animation-duration, phương thức này cần một giá trị thời gian.

Không giống như animation-duration, bạn có thể xác định animation-delay là một giá trị phủ định giá trị này làm cho ảnh động bắt đầu tại điểm tương ứng trong dòng thời gian. Ví dụ: nếu ảnh động của bạn dài 10 giây và bạn đặt animation-delay đến -5s, ảnh động bắt đầu từ giữa chừng dòng thời gian.

Hãy thử thay đổi độ trễ của ảnh động.

animation-play-state

Hỗ trợ trình duyệt

  • Chrome: 43.
  • Cạnh: 12.
  • Firefox: 16.
  • Safari: 9.

Nguồn

.my-element:hover {
    animation-play-state: paused;
}

Ảnh động-trạng thái chơi cho phép bạn phát và tạm dừng ảnh động. Giá trị mặc định là running. Nếu bạn đặt thành paused thì ảnh động sẽ tạm dừng.

Giữ con trỏ trên phần tử động để tạm dừng ảnh động.

animation-fill-mode

Hỗ trợ trình duyệt

  • Chrome: 43.
  • Cạnh: 12.
  • Firefox: 16.
  • Safari: 9.

Nguồn

animation-fill-mode xác định các giá trị trong dòng thời gian @keyframes tồn tại trước ảnh động bắt đầu hoặc sau khi kết thúc. Giá trị mặc định là none, tức là khi ảnh động hoàn tất, các giá trị trong dòng thời gian của bạn sẽ bị loại bỏ. Các lựa chọn khác bao gồm:

  • forwards: Khung hình chính cuối cùng vẫn giữ nguyên, dựa trên hướng ảnh động.
  • backwards: Khung hình chính đầu tiên giữ nguyên, dựa trên hướng của ảnh động.
  • both: Cả khung hình chính đầu tiên và cuối cùng vẫn giữ nguyên.
Hãy thử thay đổi chế độ tô màu nền.

Viết tắt animation

Thay vì xác định riêng từng thuộc tính, bạn có thể xác định các thuộc tính đó trong một Viết tắt animation, cho phép bạn xác định các thuộc tính ảnh động trong thứ tự sau:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state
.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

Những điều cần cân nhắc khi sử dụng ảnh động

Người dùng có thể đặt hệ điều hành để giảm chuyển động khi tương tác với ứng dụng và trang web. Bạn có thể phát hiện lựa chọn ưu tiên này bằng tính năng prefers-reduced-motion truy vấn phương tiện:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Đây không nhất thiết là lựa chọn ưu tiên không dùng ảnh động. Bạn có thể ưu tiên giảm giá hoạt ảnh, đặc biệt là ít hoạt ảnh gây bất ngờ. Bạn có thể tìm hiểu thêm về lựa chọn ưu tiên này và hiệu suất tổng thể trong hướng dẫn về ảnh động.

Hãy thử một ví dụ về ảnh động bị giảm kích thước.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về ảnh động

Tên hoặc giá trị nhận dạng tuỳ chỉnh của ảnh động @keyframes có phân biệt chữ hoa chữ thường không?

Có
🎉
Không
CSS không cho phép 2 ảnh động có cùng tên, nhưng cho phép SWOOP và swoop cùng tồn tại.

Từ khóa from và to giống với:

start và end.
Hãy thử lại!
0% và 100%.
from giống với 0% và to giống với 100%.
0 và 1
Hãy thử lại!

animation-timing-function còn thường được gọi là:

Thời gian linh động
Hãy thử lại!
Trễ
Hãy thử lại!
Hàm Easing
🎉

Số lượng khung hình chính tối thiểu cần có trong ảnh động @keyframes là bao nhiêu?

1
Trình duyệt sẽ lấy trạng thái hiện tại của phần tử làm khung hình chính, vì vậy, cần có ít nhất 1 khung hình chính.
2
Hãy thử lại!
3
Hãy thử lại!
4
Hãy thử lại!