Hướng dẫn CSS Animations: Hướng dẫn đầy đủ cho người mới bắt đầu

Đây là hướng dẫn cú pháp đầy đủ và hướng dẫn hoạt ảnh CSS tương tác cho người mới bắt đầu. Sử dụng nó làm tài liệu tham khảo để tìm hiểu các phần khác nhau của thông số hoạt ảnh CSS.

Hiệu suất trình duyệt đã đi một chặng đường dài trong 10 năm qua. Trước đây, việc thêm hoạt ảnh tương tác vào các trang web từng khó khăn hơn rất nhiều do khả năng xảy ra các vấn đề về kết xuất và hiệu suất. Nhưng ngày nay, hoạt ảnh CSS có thể được sử dụng tự do hơn nhiều và cú pháp thường dễ học hơn nhiều so với các tính năng CSS như lưới hoặc flexbox.

Có nhiều tính năng khác nhau là một phần của đặc tả hoạt hình CSS W3C. Một số dễ sử dụng hơn những người khác. Hướng dẫn hoạt ảnh khung hình chính CSS này sẽ trải qua tất cả các cú pháp, bao gồm từng thuộc tính khác nhau. Tôi sẽ bao gồm các bản demo tương tác để giúp bạn nắm bắt những gì có thể với hoạt ảnh CSS.

Cú pháp @keyframes

Mỗi hoạt ảnh CSS có hai phần của nó: Một hoặc nhiều animation-* thuộc tính cùng với một tập hợp các khung hình chính hoạt hình được xác định bằng cách dùng @keyframes tại quy tắc. Chúng ta hãy xem xét chi tiết những gì đi vào việc xây dựng một @keyframes bộ quy tắc.

Cú pháp trông như thế này:

@keyframes moveObject {
  0% {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  100% {
    transform: translateX(300px) scale(1.5);
  }
}

Như được hiển thị ở đây, @keyframes at-rule bao gồm ba phần cơ bản:

• Các @keyframes quy tắc theo sau là tên hoạt hình tùy chỉnh
• Một bộ niềng răng xoăn bao bọc tất cả các khung hình chính
• Một hoặc nhiều khung hình chính, mỗi khung hình có một tỷ lệ phần trăm theo sau là một bộ quy tắc được bao quanh bởi dấu ngoặc nhọn

Trong ví dụ đầu tiên này của hướng dẫn CSS animations của chúng ta, tôi đã định nghĩa animation của mình với tên moveObject. Đây có thể là bất kỳ tên nào tôi muốn, phân biệt chữ hoa chữ thường và phải tuân theo mã định danh tùy chỉnh quy tắc trong CSS. Tên tùy chỉnh này phải khớp với tên được sử dụng trong animation-name tài sản (thảo luận sau).

Trong ví dụ của tôi, bạn sẽ nhận thấy tôi đã sử dụng tỷ lệ phần trăm để xác định từng khung hình chính trong hoạt ảnh của mình. Nếu hoạt hình của tôi bao gồm các khung hình chính bằng nhau 0% và 100%, tôi có thể sử dụng cách khác from và to Từ khoá:

@keyframes moveObject {
  from {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  to {
    transform: translateX(300px) scale(1.5);
  }
}

CodePen tương tác sau đây sử dụng cú pháp trên trong một ví dụ trực tiếp:

Trong bản demo, tôi đã bao gồm một nút đặt lại hoạt ảnh. Tôi sẽ giải thích sau tại sao điều này là cần thiết. Nhưng hiện tại, chỉ cần biết rằng hoạt ảnh này bao gồm ba khung hình chính đại diện cho các bước trong chuỗi hoạt hình này: bắt đầu, bước 50% và kết thúc (tức là 0%, 50% và 100%). Mỗi trong số này sử dụng cái được gọi là bộ chọn khung hình chính cùng với dấu ngoặc nhọn để xác định các thuộc tính ở bước đó.

Một số điều cần lưu ý về @keyframes cú pháp:

• Bạn có thể đặt các bộ quy tắc khung hình chính theo bất kỳ thứ tự nào bạn muốn và trình duyệt sẽ vẫn chạy chúng theo thứ tự được xác định bởi tỷ lệ phần trăm của chúng
• Bạn có thể bỏ qua các khung hình chính 0% và 100% và trình duyệt sẽ tự động xác định chúng bằng các khung hình hiện có Phong cách trên phần tử đang được hoạt hình
• Nếu có các khung hình chính trùng lặp với các bộ quy tắc khác nhau (ví dụ: hai khung hình chính cho 20% với giá trị chuyển đổi khác nhau), trình duyệt sẽ sử dụng khung cuối cùng
• Bạn có thể xác định nhiều khung hình chính trong một bộ chọn khung hình chính bằng dấu phẩy: 10%, 30% { ... }
• Các !important từ khóa vô hiệu hóa bất kỳ giá trị thuộc tính nào để không nên sử dụng nó trên một thuộc tính bên trong bộ quy tắc khung hình chính

👉 Bây giờ bạn đã hiểu rõ về @keyframes cú pháp trong hướng dẫn hoạt hình CSS này, chúng ta hãy xem xét các thuộc tính hoạt hình khác nhau được xác định trên phần tử đang được hoạt hình.

Các thuộc tính animation mà chúng ta sẽ đề cập đến:

Thuộc tính tên hoạt hình

Như đã đề cập, mỗi hoạt ảnh CSS bạn tạo phải có một tên xuất hiện trong @keyframes cú pháp. Tên này phải là cùng một tên được xác định bằng cách sử dụng animation-name tài sản.

Sử dụng CSS từ bản demo trước, cú pháp trông như thế này:

.box {
  animation-name: moveObject;
}

Một lần nữa, tên tùy chỉnh mà tôi đã định nghĩa cũng phải tồn tại dưới dạng tên cho một @keyframes theo quy định – nếu không tên này sẽ không làm gì cả. Bạn có thể nghĩ về điều này giống như một cuộc gọi hàm bằng JavaScript. Bản thân chức năng sẽ là @keyframes moveObject {} một phần của mã, trong khi lệnh gọi hàm là animation-name: moveObject.

Một số điều cần lưu ý animation-name:

• Giá trị ban đầu cho animation-name Là none, có nghĩa là không có khung hình chính nào đang hoạt động. Điều này có thể được sử dụng như một loại ‘chuyển đổi’ để hủy kích hoạt hoạt ảnh.
• Tên bạn đã chọn có phân biệt chữ hoa chữ thường và có thể bao gồm chữ cái, số, dấu gạch dưới và hdấu gạch nối.
• Ký tự đầu tiên trong tên phải là một chữ cái hoặc dấu gạch nối, nhưng chỉ có một dấu gạch nối duy nhất.
• Tên không thể là một từ dành riêng như unset, initialhoặc inherit.

Thuộc tính thời lượng hoạt hình

Các animation-duration thuộc tính, không có gì ngạc nhiên, xác định lượng thời gian một hoạt ảnh cần thiết để chạy một lần từ đầu đến cuối. Giá trị này có thể được chỉ định trong vài giây hoặc mili giây, như hình dưới đây:

.box {
  animation-duration: 2s;
}

Những điều trên sẽ tương đương với những điều sau đây:

.box {
  animation-duration: 2000ms;
}

Bạn có thể thấy animation-duration thuộc tính đang hoạt động trong bản demo sau của CodePen. Trong bản demo này, bạn có thể chọn thời lượng bạn muốn hoạt ảnh tồn tại. Hãy thử nhập các giá trị khác nhau trong vài giây hoặc mili giây, sau đó sử dụng nút “Tạo hiệu ứng hoạt hình cho Hộp” để chạy hoạt ảnh.

Nếu bạn sử dụng một số nhỏ cùng với ms đối với đơn vị, bạn thậm chí có thể không nhận thấy bất kỳ chuyển động nào. Hãy thử đặt số cao hơn nếu bạn đang sử dụng mili giây.

Một số lưu ý khi sử dụng animation-duration:

• Giá trị âm không hợp lệ
• Đơn vị phải được bao gồm, ngay cả khi thời lượng được đặt thành 0s (giá trị ban đầu)
• Bạn có thể sử dụng các giá trị phân số (ví dụ: 0.8s)

Thuộc tính hoạt hình-thời gian-chức năng

Các animation-timing-function, không rõ ràng về ý nghĩa của nó như hai thuộc tính trước, được sử dụng để xác định cách thức mà hoạt ảnh CSS tiến triển. Đó có thể không phải là lời giải thích rõ ràng nhất, nhưng cú pháp có thể giúp làm rõ.

Tuyên bố trông như thế này:

.box {
  animation-timing-function: linear;
}

Thuộc tính này chấp nhận các giá trị từ khóa sau:

• ease (giá trị ban đầu)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

Hầu hết các giá trị tương đối dễ nắm bắt bằng tên của chúng, nhưng bạn có thể thấy chúng khác nhau như thế nào bằng cách sử dụng bản demo tương tác sau:

Sử dụng đầu vào select để chọn một trong bảy giá trị từ khóa. Lưu ý rằng ease-* giá trị ‘giảm bớt’ hoạt ảnh theo nhiều cách khác nhau. Một giá trị tuyến tính là nhất quán trong suốt chặng đường.

Các animation-timing-function property cũng chấp nhận các chức năng sau:

• cubic-bezier() – Chấp nhận làm đối số bốn giá trị số, cách nhau bằng dấu phẩy
• steps() – Chấp nhận làm đối số hai giá trị, một số và một “thuật ngữ nhảy”, được phân tách bằng dấu phẩy

Các giá trị từ khóa step-start và step-end tương đương với các giá trị steps(1, jump-start) và steps(1, jump-end)Tương ứng.

Đối với cubic-bezier(), bản demo tương tác sau đây có thể giúp bạn hiểu chức năng tốt hơn một chút:

Lưu ý bản demo cho phép bạn đặt bốn đối số trong cubic-bezier() chức năng. Hai trong số các đối số có thể là số âm và hai đối số bị giới hạn ở các giá trị thập phân trong khoảng từ 0 đến 1. Để có một lời giải thích hợp lý về cách các loại chức năng thời gian này hoạt động, bạn có thể kiểm tra bài viết này hoặc công cụ tương tác này.

Các steps() mặt khác, hàm chấp nhận hai đối số:

• Một số nguyên đại diện cho các “điểm dừng” bằng nhau dọc theo một chu kỳ duy nhất của hoạt ảnh.
• Một từ khóa tùy chọn được gọi là “jumpterm” để xác định xem hoạt ảnh có “giữ” trong các khoảng thời gian cụ thể hay không

Một lần nữa, một bản demo tương tác sẽ giúp bạn nắm bắt cách thức hoạt động của các jumpterms này:

Hãy thử chọn một số nguyên cùng với jumpterm (hoặc thử nó mà không có jumpterm) để xem các từ khóa khác nhau khác nhau như thế nào với các giá trị số nguyên khác nhau. Rõ ràng các số nguyên âm được cho phép nhưng tôi không thấy bất kỳ sự khác biệt nào giữa 0 và bất kỳ giá trị âm nào.

Thuộc tính hoạt hình-lặp lại-đếm

Trong một số trường hợp, bạn sẽ hài lòng nếu một hoạt ảnh chạy một lần, nhưng đôi khi bạn muốn một hoạt ảnh chạy nhiều lần. Các animation-iteration-count thuộc tính cho phép bạn thực hiện việc này bằng cách chấp nhận một số dương đại diện cho số lần bạn muốn hoạt hình chạy:

.box {
  animation-iteration-count: 3;
}

Giá trị ban đầu cho animation-iteration-count Là 1 nhưng bạn cũng có thể sử dụng từ khóa infinite (tự giải thích) hoặc sử dụng một giá trị phân số. Một giá trị phân số sẽ chạy hoạt ảnh một phần trong quá trình chạy phân số:

.box {
  animation-iteration-count: 3.5;
}

Đoạn mã trên chạy qua hoạt ảnh ba lần rưỡi. Đó là, ba lần lặp lại đầy đủ theo sau là một lần lặp lại cuối cùng dừng lại chính xác giữa chừng.

Khách sạn này là hữu ích nhất when được sử dụng cùng với animation-direction thuộc tính (thảo luận tiếp theo), bởi vì một hình ảnh động chỉ chạy lại từ đầu không cực kỳ hữu ích nếu nó chạy nhiều lần.

Bạn có thể thử bản demo bên dưới cho phép bạn chọn một giá trị phân số cho số lần lặp lại, vì vậy bạn có thể thấy hiệu ứng:

Thuộc tính hướng hoạt hình

Như đã đề cập ở trên trong hướng dẫn hoạt hình CSS này, animation-direction tài sản hoạt động độc đáo kết hợp với animation-iteration-count. Các animation-direction thuộc tính cho phép bạn xác định hướng bạn muốn hoạt ảnh phát. Cú pháp trông như thế này:

.box {
  animation-direction: alternate;
}

Bạn có thể đặt giá trị là một trong bốn từ khóa:

• normal – Hình ảnh động phát về phía trước trong lần lặp lại đầu tiên (mặc định)
• reverse – Hoạt ảnh phát ngược trong lần lặp lại đầu tiên
• alternate – Hình ảnh động phát về phía trước trong lần lặp lại đầu tiên sau đó xen kẽ vào các lần lặp lại tiếp theo
• alternate-reverse – Tương tự như alternate nhưng chơi ngược lại trong lần lặp lại đầu tiên

Bạn có thể thử các giá trị khác nhau với số lần lặp khác nhau bằng cách sử dụng bản demo tương tác bên dưới:

Thuộc tính trạng thái hoạt hình-chơi-trạng thái

Các animation-play-state thuộc tính không cực kỳ hữu ích trong môi trường CSS tĩnh nhưng có thể hữu ích khi viết hoạt ảnh tương tác qua JavaScript hoặc thậm chí CSS.

Thuộc tính này chấp nhận hai giá trị: running hoặc paused:

.box {
  animation-direction: paused;
}

Theo mặc định, bất kỳ hoạt ảnh nhất định nào cũng ở trạng thái “đang chạy”. Tuy nhiên, bạn có thể sử dụng JavaScript để chuyển đổi giá trị của thuộc tính. Bạn thậm chí có thể sử dụng một tính năng CSS tương tác như :hover hoặc :focus để thay đổi hoạt ảnh thành trạng thái “tạm dừng”, về cơ bản sẽ đóng băng hoạt ảnh ở bất cứ đâu trong lần lặp hiện tại.

Bản demo tương tác bên dưới có một hình ảnh động chạy vô hạn với hai nút để “tạm dừng” và “tiếp tục” hoạt ảnh.

Thuộc tính độ trễ hoạt hình

Một số hình ảnh động là Thiết kế để bắt đầu hoạt hình ngay lập tức, trong khi những người khác có thể được hưởng lợi từ một chút chậm trễ trước lần lặp lại đầu tiên. Các animation-delay tài sản cho phép bạn thực hiện điều này.

.box {
  animation-delay: 4s;
}

Giống như các giá trị dựa trên thời gian khác, bạn có thể đặt animation-delay đến một giá trị bằng cách sử dụng giây hoặc mili giây. Bạn cũng có thể sử dụng các giá trị phân số.

Điều quan trọng cần lưu ý là độ trễ chỉ xảy ra ở lần lặp đầu tiên, không phải mỗi lần lặp lại. Bạn có thể thử điều này bằng cách sử dụng bản demo tương tác bên dưới:

Bản demo cung cấp cho bạn tùy chọn để thay đổi giá trị lặp lại cũng như độ trễ, vì vậy bạn có thể thấy rằng độ trễ không ảnh hưởng đến bất kỳ lần lặp lại nào tiếp theo – chỉ lần đầu tiên.

Một cách thú vị để sử dụng tài sản này là với một giá trị âm. Ví dụ: sử dụng bản demo ở trên, hãy thử thiết lập animation-delay đến -0.5s. Bạn sẽ nhận thấy độ trễ tiêu cực hoạt động gần giống như đi về phía trước trong một cỗ máy thời gian – hoạt ảnh bắt đầu một phần thay vì ở đầu.

Thuộc tính chế độ tô hoạt hình

Thuộc tính longhand cuối cùng mà tôi sẽ đề cập trong hướng dẫn hoạt hình CSS này là thuộc tính mà tôi đã sử dụng trong bản demo trước. Bạn sẽ nhận thấy rằng khi hoạt ảnh dừng lần lặp cuối cùng, hộp vẫn ở vị trí cũ. Điều này được thực hiện bằng cách sử dụng animation-fill-mode.

.box {
  animation-fill-mode: forwards;
}

Thuộc tính này đặt cách hoạt hình áp dụng các kiểu cho phần tử được nhắm mục tiêu trước và sau khi thực thi. Điều đó hơi khó để nắm bắt về mặt khái niệm, vì vậy tôi sẽ đề cập đến ý nghĩa của từng giá trị; sau đó bạn có thể so sánh các giá trị bằng cách sử dụng bản demo tương tác.

Thuộc tính này chấp nhận bốn giá trị từ khóa sau:

• none – Mặc định, không có kiểu nào được áp dụng trước hoặc sau khi thực hiện
• forwards – Giữ lại tất cả các kiểu được áp dụng trong khung hình chính cuối cùng của hoạt ảnh
• backwards – Ít nhiều ngược lại với giá trị trước đó, nó giữ lại các kiểu được áp dụng cho hoạt ảnh ngay khi nó bắt đầu thực thi nhưng trước khi hoạt ảnh bắt đầu
• both – Giữ lại phong cách cho cả hai forwards và backwards

Bản demo cuối cùng trong hướng dẫn hoạt ảnh CSS này sẽ làm cho mọi thứ rõ ràng hơn một chút, nhưng bản demo này có thể mất rất nhiều thời gian để chơi xung quanh trước khi bạn thực sự nhận được những gì nó làm và làm thế nào nó đạt được nó.

Để thuận tiện, tôi đã thêm tất cả các bản demo vào một Bộ sưu tập CodePen duy nhất.

Bạn sẽ nhận thấy rằng bản demo cho phép bạn điều chỉnh chế độ điền, độ trễ, hướng và số lần lặp lại, vì tất cả những điều này có thể có ảnh hưởng đến giao diện. Tôi cũng đã thêm một màu nền khác vào hộp hoạt hình trong khung hình chính đầu tiên, điều này một lần nữa giúp làm cho các giá trị chế độ điền rõ ràng hơn một chút. Nếu bạn vẫn không hoàn toàn hiểu làm thế nào animation-fill-mode hoạt động, bạn có thể kiểm tra một bài báo cũ hơn Tôi đã viết rằng thảo luận animation-fill-mode chuyên sâu.

Thuộc tính tốc ký hoạt hình

Tôi đã đề cập đến tám thuộc tính khác nhau trong hướng dẫn hoạt hình CSS này cho người mới bắt đầu và tôi khuyến khích bạn sử dụng bàn tay dài. Điều này sẽ giúp bạn dễ dàng xem các giá trị rõ ràng được đặt.

Khi bạn đã hiểu rõ về từng thuộc tính, bạn có tùy chọn để sử dụng animation thuộc tính tốc ký, cho phép bạn xác định tất cả các thuộc tính longhand trong một khai báo duy nhất.

.box {
  animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;
}

Thành thật mà nói, đó là rất nhiều thông tin trong một dòng duy nhất. Tôi khuyên bạn nên sử dụng tốc ký nếu khai báo không bao gồm tất cả các thuộc tính, nhưng có thể chỉ có ba hoặc bốn trong số chúng.

Nếu bạn sử dụng tốc ký, bạn có thể đặt các giá trị theo bất kỳ thứ tự nào bạn muốn, nhưng lưu ý các quy tắc sau:

• Giá trị đầu tiên xác định thời gian là animation-duration; bất kỳ giá trị thời gian nào tiếp theo là animation-delay.
• Nếu có xung đột giữa một từ khóa và animation-name, giá trị từ khóa sẽ được ưu tiên nếu nó xuất hiện đầu tiên.
• Bất kỳ giá trị bị bỏ qua nào cũng sẽ quay trở lại trạng thái ban đầu của chúng, như với bất kỳ thuộc tính tốc ký CSS nào.

Áp dụng nhiều hoạt ảnh cho một yếu tố duy nhất

Một tính năng cuối cùng mà bạn nên lưu ý là bạn có tùy chọn áp dụng nhiều hoạt ảnh cho một đối tượng bằng cách phân tách dấu phẩy các hoạt ảnh.

Dưới đây là một ví dụ sử dụng tốc ký:

.box {
  animation: moveObject 2s ease-in-out, fadeBox 3s linear;
}

Ở đây, tôi đã định nghĩa hai hoạt ảnh khác nhau sẽ ánh xạ đến hai bộ khung hình chính khác nhau, nhưng sẽ áp dụng cho cùng một đối tượng. Mã tương tự có thể được viết bằng tay dài như sau:

.box {
  animation-name: moveObject, fadeBox;
  animation-duation: 2s, 3s;
  animation-timing-function: ease-in-out, linear;
}

Lưu ý cách mỗi thuộc tính bao gồm hai giá trị được phân tách bằng dấu phẩy. Trong trường hợp này, tốc ký gần như chắc chắn sẽ dễ đọc và bảo trì hơn.

Kết thúc hướng dẫn hoạt hình CSS này

👉 Một cảnh báo cuối cùng: Sử dụng hoạt ảnh ở mức độ vừa phải và hãy nhớ rằng một số người dùng web có thể bị ảnh hưởng tiêu cực bởi màu nhấp nháy và các đối tượng chuyển động nhanh khác.