Ảnh động

Ảnh động là một cách tuyệt vời để làm nổi bật các phần tử tương tác, đồng thời làm tăng sự quan tâm và sự thú vị cho các thiết kế của bạn. Trong mô-đun 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 thấy các trình trợ giúp nhỏ trên giao diện mà khi nhấp vào, hãy cung cấp một số thông tin hữu ích về phần cụ thể đó. Các thông báo này thường có ảnh động nhấp nháy để tinh tế cho bạn biết rằng thông tin ở đó và nên được tương tác. Bạn làm việc này với CSS như thế nào?

Trong CSS, bạn có thể tạo loại ảnh động này bằng cách sử dụng ảnh động CSS. Hệ thống này cho phép bạn thiết lập một trình tự ảnh động bằng cách sử dụng khung hình chính. Ảnh động có thể là ảnh động đơn giản, một trạng thái hoặc thậm chí là các trình tự phức tạp dựa trên thời gian.

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

Trong phần mềm ảnh động, CSS và hầu hết các công cụ khác hỗ trợ bạn tạo ảnh động cho nội dung nào đó, khung hình chính là cơ chế mà bạn sử dụng để gán trạng thái ảnh động cho dấu thời gian, theo tiến trình.

Hãy dùng " bộ phát xung" làm ngữ cảnh cho vấn đề này. Toàn bộ ảnh động chạy trong 1 giây và chạy qua 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 xác định những khung hình này trên dòng thời gian bằng khung hình chính.

@keyframes

Giờ đây, bạn đã biết khung hình chính là gì, kiến thức đó sẽ giúp bạn hiểu cách quy tắc CSS @keyframes hoạt động. Dưới đây là quy tắc cơ bản với hai trạng thái.

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

Phần đầu tiên cần lưu ý là thông tin nhận dạng tuỳ chỉnh (giá trị nhận dạng tuỳ chỉnh) – hay nói một cách đơn giản hơn là tên của quy tắc khung hình chính. Giá trị nhận dạng của quy tắc này là my-animation. Giá trị nhận dạng tuỳ chỉnh hoạt động giống như tên hàm. Như bạn đã tìm hiểu trong mô-đun hàm, phương thức này 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 của ảnh động và kết thúc. 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í tuỳ thích trong khung thời gian đó. Dựa trên ngữ cảnh của ví dụ về "xung", có 2 trạng thái có thể dịch thành 2 khung hình chính. Điều này có nghĩa là bạn có 2 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;
  }
}

Thuộc tính animation

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

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

.my-element {
    animation-timing-function: ease-in-out;
}

Các giá trị có vẻ như đường cong cùng với các hàm gia tốc vì tốc độ được tính bằng đường cong Bézier, dùng để lập mô hình vận tốc. Mỗi từ khoá 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() chấp nhận bốn 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ẽ đồ thị từng phần của đường cong dọc theo trục X và Y.

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

Hàm gia tốc steps

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

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

Đối số đầu tiên là số bước. Nếu các bước được xác định là 10 và có 10 khung hình chính, 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 mà không có chuyển đổi giữa các trạng thái. Nếu không có đủ khung hình chính cho các bước, các bước giữa các khung hình chính sẽ được thêm vào 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 khi kết thúc tiến trình. Nếu bạn đặt thành start, thì bước đầu tiên của ảnh động sẽ hoàn tất ngay khi bắt đầu, nghĩa là bước này 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. Theo mặc định, giá trị này là 1, có nghĩa là khi ảnh động đi đến cuối tiến trình của bạn, thì ảnh động sẽ dừng ở cuối tiến trình. Số này không được là số âm.

Bạn có thể sử dụng từ khoá infinite sẽ lặp lại ảnh động, đó là cách bản minh hoạ "pulser" bắt đầu của 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 hướng ảnh động:

• normal: giá trị mặc định được 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ẽ chạy tới hoặc lui theo trình tự.
• alternate-reverse: mặt ngược lại của alternate.

animation-delay

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

Thuộc tính animation-delay xác định khoảng thời gian chờ trước khi bắt đầu ảnh động. Tương tự như thuộc tính animation-duration, thuộc tính này chấp nhận giá trị thời gian.

Không giống như thuộc tính animation-duration, bạn có thể xác định giá trị này là một giá trị âm. Nếu bạn đặt một giá trị âm, dòng thời gian trong @keyframes sẽ bắt đầu tại thời điểm đó. Ví dụ: nếu ảnh động của bạn 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ọc theo dòng thời gian của bạn.

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 và nếu bạn đặt thành paused thì giá trị này sẽ tạm dừng ảnh động.

animation-fill-mode

Thuộc tính animation-fill-mode xác định các giá trị nào 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 bắt đầu hoặc 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 tùy chọn khác là:

• forwards: Khung hình chính cuối cùng sẽ tồn tại, dựa trên hướng ảnh động.
• backwards: Khung hình chính đầu tiên sẽ vẫn tồn tại, dựa trên hướng ảnh động.
• both: tuân theo các quy tắc cho cả forwards và backwards.

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 chúng 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 yếu tố cần cân nhắc khi làm việc với ảnh động

Trong hệ điều hành, người dùng có thể xác định rằng họ muốn giảm trải nghiệm chuyển động khi tương tác với các ứ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 cách sử dụng truy vấn nội dung đa phương tiện prefers-reduced-motion (ưu tiên).

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

Đây không nhất thiết là ưu tiên không dùng ảnh động, mà là ưu tiên giảm bớt ảnh động – đặc biệt là những ảnh không mong muố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ể qua hướng dẫn về ảnh động này.

Kiểm tra mức độ hiểu biết của bạn

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