Ảnh động

Ảnh động là một cách hiệu quả để làm nổi bật các yếu tố tương tác, đồng thời tạo ra sự hứng thú và thú vị cho các thiết kế của bạn. Trong học phần này, hãy tìm hiểu cách thêm và kiểm soát hiệu ứng ảnh động bằng CSS.

Đôi khi, bạn sẽ thấy một số trình trợ giúp nhỏ trên các giao diện cung cấp một số thông tin hữu ích về phần chứa chúng khi bạn nhấp vào các trình trợ giúp đó. Những thẻ 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 ở đó và cần được tương tác. Mô-đun này cho bạn biết cách tạo các trình trợ giúp đó và các ảnh động khác bằng CSS.

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

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

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

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

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

@keyframes

CSS @keyframes dựa trên cùng một khái niệm như khung hình chính ảnh động.

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à giá trị 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 đến 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ừ khoá đại diện cho 0% và 100%, là điểm bắt đầu và kết thúc của ảnh động. Bạn có thể tạo lại chính 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 khung thời gian. Trong ví dụ về trình trợ giúp nhấp nháy, có 2 trạng thái dịch thành 2 khung hình chính. Điều này có nghĩa là bạn có hai vị trí bên trong quy tắc khung hình chính để thể hiện các 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 riêng nhiều thuộc tính ảnh động hoặc sử dụng thuộc tính viết tắt animation.

animation-duration

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

Thuộc tính animation-duration xác định khoảng thời gian tiến trình @keyframes phải là giá trị thời gian. Thời lượng mặc định là 0 giây, nghĩa là ảnh động vẫn chạy nhưng sẽ quá nhanh để bạn nhìn thấy. Bạn không thể sử dụng giá trị thời gian là số â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 toán tốc độ của ảnh động tại mỗi điểm. Các giá trị được tính thường coi, khiến ảnh động chạy ở tốc độ thay đổi trong suốt quá trình animation-duration và làm cho phần tử có vẻ nảy lên nếu trình duyệt tính toán một giá trị vượt quá giá trị được xác định trong @keyframes.

Có một số từ khoá có sẵn dưới dạng giá trị đặt trước trong CSS để dùng làm giá trị cho animation-timeing-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ì 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 từ khoá về hàm thời gian, chẳng hạn như ease, tham chiếu đến một đườ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(). Hàm này 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ẽ từng phần của đường cong dọc theo trục X và Y.

Việc hiểu đường cong Bézier rất phức tạp. Các công cụ trực quan như 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 đối với ảnh động bằng cách di chuyển theo từng khoảng 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 xác định có thời lượng bằng nhau.

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

Đối số đầu tiên là số bước. Nếu có cùng số khung hình chính như các bước, thì mỗi khung hình chính sẽ phát theo trình tự trong khoảng thời gian chính xác của bướ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 so với số bước, trình duyệt sẽ thêm các bước giữa các khung hình chính tuỳ 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 (mặc định), thì các bước sẽ kết thúc ở cuối dòng thời gian của bạn. Nếu bạn đặt thành start, bước đầu tiên của ảnh động sẽ hoàn tất ngay khi bắt đầu, có nghĩa là ảnh động sẽ kết thúc sớm hơn một bước so với end.

animation-iteration-count

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

Thuộc tính animation-iteration-count xác định số lần tiến trình @keyframes sẽ chạy trong khi tạo ảnh động. Theo mặc định, giá trị này là 1, có nghĩa là ảnh động sẽ dừng khi đến cuối dòng thời gian. 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 lại thành infinite. Đây là cách hoạt động của ả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ể đặt hướng cho dòng thời gian chạy trên khung hình chính của mình bằng ảnh động-direct, các giá trị này sẽ nhận các giá trị sau:

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

animation-delay

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

Thuộc tính animation-delay xác định khoảng thời gian trình duyệt chờ trước khi bắt đầu ảnh động. Tương tự như thuộc tính animation-duration, hàm này cần có 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ị âm, giá trị này khiến ảnh động bắt đầu tại điểm tương ứng trong dòng thời gian. Ví dụ: nếu ảnh động dài 10 giây và bạn đặt animation-delay thành -5s, thì ảnh động sẽ bắt đầu từ một nửa dòng thời gian.

animation-play-state

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

Thuộc tính animation-play-state 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 chính sách này thành paused, ảnh động sẽ tạm dừng.

animation-fill-mode

Thuộc tính animation-fill-mode xác định những giá trị trong tiến trình @keyframes của bạn vẫn tồn tại trước khi ảnh động bắt đầu hoặc sau khi ảnh động kết thúc. Giá trị mặc định là none, nghĩa 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 tồn tại, dựa trên hướng ảnh động.
• backwards: Khung hình chính đầu tiên vẫn giữ nguyên, dựa trên hướng ả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 đó bằng cách viết tắt animation, điều này cho phép bạn xác định các thuộc tính ảnh động theo 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 để ưu tiên 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 tuỳ chọn này bằng cách sử dụng truy vấn nội dung đa phương tiện prefers-reduced-motion:

@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 khi không dùng ảnh động. Ưu tiên ít ảnh động hơn, đặc biệt là ảnh động ít ngoài dự kiến. 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 của chúng tôi.

Kiểm tra kiến thức

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