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).
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.
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.
@keyframes
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;
}
}
Các thuộc tính animation
Để 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
.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
Để 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;
}
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.
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.
animation-iteration-count
.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.
Để 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.
animation-direction
.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.
animation-delay
.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.
animation-play-state
.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.
animation-fill-mode
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.
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:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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.
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?
Từ khóa from
và to
giống với:
start
và end
.0%
và 100%
.0
và 1
animation-timing-function
còn thường được gọi là:
Số lượng khung hình chính tối thiểu cần có trong ảnh động @keyframes
là bao nhiêu?