Chạy dòng hoạt hình css

Định cấu hình hoạt ảnh

Để tạo một chuỗi hoạt hình CSS, bạn tạo kiểu cho phần tử mà bạn muốn tạo hiệu ứng với thuộc tính

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Các thuộc tính phụ của thuộc tính

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Chỉ định độ trễ giữa tải phần tử và bắt đầu chuỗi hoạt ảnh và liệu hoạt ảnh sẽ bắt đầu ngay từ đầu hay giữa chừng hoạt ảnh

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Chỉ định xem lần lặp đầu tiên của hoạt ảnh nên tiến hay lùi và liệu các lần lặp tiếp theo sẽ thay đổi hướng trên mỗi lần chạy qua trình tự hay đặt lại điểm bắt đầu và lặp lại

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Chỉ định khoảng thời gian mà một hình ảnh động hoàn thành một chu kỳ

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Chỉ định cách một hoạt ảnh áp dụng các kiểu cho mục tiêu của nó trước và sau khi nó chạy

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Chỉ định số lần hoạt ảnh sẽ lặp lại

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Chỉ định tên của quy tắc

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Chỉ định tạm dừng hoặc phát một chuỗi hoạt hình

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Chỉ định cách hoạt ảnh chuyển tiếp qua các khung hình chính bằng cách thiết lập các đường cong gia tốc

Xác định trình tự hoạt ảnh bằng cách sử dụng khung hình chính

Sau khi bạn đã định cấu hình thời gian của hoạt ảnh, bạn cần xác định hình thức của hoạt ảnh. Điều này được thực hiện bằng cách thiết lập một hoặc nhiều khung hình chính bằng quy tắc

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Vì thời gian của hoạt ảnh được xác định theo kiểu CSS định cấu hình hoạt ảnh, khung hình chính sử dụng

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Bạn có thể tùy chọn bao gồm các khung hình chính bổ sung mô tả các bước trung gian giữa phần đầu và phần cuối của hoạt ảnh

Sử dụng tốc ký hoạt hình

Tốc ký

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

có thể được thay thế bằng cách sử dụng tốc ký

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Để tìm hiểu thêm về trình tự trong đó các giá trị thuộc tính hoạt hình khác nhau có thể được chỉ định bằng cách sử dụng tốc ký

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Đặt nhiều giá trị thuộc tính hoạt ảnh

Các thuộc tính longhand của hoạt ảnh CSS có thể chấp nhận nhiều giá trị, được phân tách bằng dấu phẩy. Tính năng này có thể được sử dụng khi bạn muốn áp dụng nhiều hoạt ảnh trong một quy tắc duy nhất và đặt các khoảng thời gian khác nhau, số lần lặp lại, v.v. , cho mỗi hoạt ảnh. Hãy xem xét một số ví dụ nhanh để giải thích các hoán vị khác nhau

Trong ví dụ đầu tiên này, có ba thời lượng và ba giá trị số lần lặp lại. Vì vậy, mỗi hoạt ảnh được gán một giá trị thời lượng và số lần lặp với cùng vị trí với tên hoạt ảnh. Hoạt ảnh

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Trong ví dụ thứ hai này, ba tên hoạt hình được đặt, nhưng chỉ có một thời lượng và số lần lặp lại. Trong trường hợp này, cả ba hoạt ảnh đều có cùng thời lượng và số lần lặp lại

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Trong ví dụ thứ ba này, ba hoạt ảnh được chỉ định, nhưng chỉ có hai thời lượng và số lần lặp lại. Trong những trường hợp không có đủ giá trị trong danh sách để gán một giá trị riêng cho mỗi hoạt ảnh, việc gán giá trị sẽ chuyển từ mục đầu tiên sang mục cuối cùng trong danh sách khả dụng rồi quay trở lại mục đầu tiên. Vì vậy,

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Nếu sự không khớp về số lượng hoạt ảnh và giá trị thuộc tính hoạt ảnh bị đảo ngược, giả sử có năm giá trị

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

ví dụ

Ghi chú. Một số trình duyệt cũ hơn (trước năm 2017) có thể cần tiền tố;

Làm cho văn bản trượt trên cửa sổ trình duyệt

Ví dụ đơn giản này tạo kiểu cho phần tử

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Lưu ý rằng các hoạt ảnh như thế này có thể khiến trang trở nên rộng hơn cửa sổ trình duyệt. Để tránh sự cố này, hãy đặt phần tử được tạo hoạt ảnh trong một vùng chứa và đặt

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Trong ví dụ này, kiểu cho phần tử

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Nếu chúng tôi muốn bất kỳ kiểu dáng tùy chỉnh nào trên phần tử

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Các khung hình chính được xác định bằng quy tắc theo quy tắc

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Khung hình chính thứ hai (và cuối cùng) xảy ra ở mức 100% (sử dụng bí danh

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Ghi chú. Tải lại trang để xem hình ảnh động

Thêm một khung hình chính khác

Hãy thêm một khung hình chính khác vào hoạt ảnh của ví dụ trước. Giả sử chúng ta muốn kích thước phông chữ của tiêu đề tăng lên khi nó di chuyển từ phải sang trái trong một thời gian, sau đó giảm trở lại kích thước ban đầu. Điều đó đơn giản như việc thêm khung hình chính này

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Mã đầy đủ bây giờ trông như thế này

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Điều này cho trình duyệt biết rằng 75% trong suốt chuỗi hoạt ảnh, tiêu đề phải có lề trái là 25% và chiều rộng phải là 150%

Ghi chú. Tải lại trang để xem hình ảnh động

Lặp lại hoạt hình

Để làm cho hoạt ảnh tự lặp lại, hãy sử dụng thuộc tính

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Thêm nó vào mã hiện có

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Làm cho hoạt hình di chuyển qua lại

Điều đó làm cho nó lặp lại, nhưng thật kỳ lạ khi nó quay lại từ đầu mỗi khi nó bắt đầu hoạt hình. Điều chúng tôi thực sự muốn là nó di chuyển qua lại trên màn hình. Điều đó dễ dàng thực hiện bằng cách đặt

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Và phần còn lại của mã

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Sử dụng các sự kiện hoạt ảnh

Bạn có thể có thêm quyền kiểm soát hoạt ảnh — cũng như thông tin hữu ích về chúng — bằng cách sử dụng các sự kiện hoạt ảnh. Những sự kiện này, được đại diện bởi đối tượng

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Chúng tôi sẽ sửa đổi ví dụ văn bản trượt để xuất một số thông tin về từng sự kiện hoạt hình khi nó xảy ra, vì vậy chúng tôi có thể xem cách chúng hoạt động

Thêm CSS

Chúng tôi bắt đầu với việc tạo CSS cho hình ảnh động. Hoạt ảnh này sẽ kéo dài trong 3 giây, được gọi là "trượt", lặp lại 3 lần và thay đổi hướng mỗi lần. Trong

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Thêm trình xử lý sự kiện hoạt hình

Chúng tôi sẽ sử dụng mã JavaScript để lắng nghe cả ba sự kiện hoạt hình có thể xảy ra. Mã này định cấu hình trình xử lý sự kiện của chúng tôi;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Đây là mã khá chuẩn; . Công việc cuối cùng mà mã này thực hiện là đặt

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Tại sao? . Vì vậy, chúng tôi sẽ tự bắt đầu hoạt ảnh bằng cách đặt lớp của phần tử thành kiểu sẽ hoạt ảnh sau khi thực tế

Nhận các sự kiện

Các sự kiện được gửi đến hàm

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Mã này cũng vậy, rất đơn giản. Nó xem xét

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Đầu ra, khi tất cả được nói và làm xong, trông giống như thế này

• Đã bắt đầu. thời gian trôi qua là 0
• Vòng lặp mới bắt đầu tại thời điểm 3. 01200008392334
• Vòng lặp mới bắt đầu lúc 6. 00600004196167
• Đã kết thúc. thời gian trôi qua là 9. 234000205993652

Lưu ý rằng thời gian rất gần, nhưng không chính xác, thời gian dự kiến ​​do thời gian được thiết lập khi hoạt ảnh được định cấu hình. Cũng lưu ý rằng sau lần lặp cuối cùng của hoạt ảnh, sự kiện

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Để cho đầy đủ, đây là HTML hiển thị nội dung trang, bao gồm danh sách mà tập lệnh chèn thông tin về các sự kiện đã nhận vào đó