Bước trong hoạt hình trong CSS là gì?

- [Tutor] Chúng ta có một chức năng thời gian cuối cùng để xem xét, và đó là chức năng các bước. Các bước hoạt động hơi khác so với các tùy chọn khác của chúng tôi đối với các chức năng định thời gian cho hoạt ảnh. Và chúng có vẻ hơi khó hiểu lúc đầu, nhưng đây là cách tôi muốn hình dung nó. Về cơ bản, chức năng các bước chia tổng thời lượng hoạt ảnh của bạn thành các khối thời gian bằng nhau. Mỗi khối đó là một bước. Mỗi khối nhỏ đó cũng chiếm một khoảng thời gian, ngay cả khi nó chỉ là một phần của giây. Vì vậy, thay vì chuyển động liên tục, hoạt hình của bạn được chia thành một loạt các điểm giữ như thế này. Và bạn có thể sử dụng nút khởi động, bước nhảy và từ khóa để kiểm soát tốt hơn cách thức hoạt động của toàn bộ hiệu ứng. Hãy tạo hiệu ứng đánh máy trên hoạt ảnh để cảm nhận về cách hoạt động của các bước. Cơ sở của hiệu ứng này là tạo hiệu ứng động cho chiều rộng của H1 để hiển thị từng chữ cái một như thể chúng đang gõ trên. Và điều đó tại một thời điểm, là những bước sẽ làm cho có thể. Vì vậy, tôi đã bắt đầu một phần mọi thứ và tôi đã viết một số khung hình chính mà chúng tôi sẽ sử dụng để tạo hiệu ứng nhấp nháy cho con trỏ. Nhưng chúng tôi vẫn cần một số khung hình chính để tạo hiệu ứng cho kiểu chữ và về cơ bản hiển thị h1, từng ký tự một. Vì vậy, tôi sẽ bắt đầu khối @keyframes của mình và tôi sẽ gọi hoạt ảnh này là typing. Và chúng tôi sẽ thiết lập các khung hình chính này, rất giống với cách chúng tôi đã thực hiện trong các ví dụ trước. Chúng tôi muốn bắt đầu h1 của mình với chiều rộng bằng không. Vì vậy, khung hình chính 0% của chúng tôi, chúng tôi sẽ đặt chiều rộng bằng 0 pixel và sau đó chúng tôi muốn nó kết thúc ở kích thước đầy đủ của nó. Vì vậy, bắt đầu về cơ bản là vô hình vì nó quá mỏng và cuối đủ rộng để nhìn thấy tất cả các chữ cái. Vì vậy, đó là khung hình chính 100% của chúng tôi và chúng tôi sẽ đặt chiều rộng ở đó là 100%. Với những khung hình chính tại chỗ. Chúng tôi sẽ chỉ định hoạt ảnh này cho h1 của chúng tôi. Vì vậy, chúng tôi sẽ đặt cho nó tên hoạt hình là gõ, giống như chúng tôi vừa có bên dưới. Và chúng tôi sẽ cung cấp cho nó thời lượng hoạt ảnh là ba giây và ngoài ra, chúng tôi sẽ cung cấp cho nó chức năng định thời gian hoạt ảnh của các bước. Bây giờ chúng ta phải cung cấp cho nó một số bước để thực hiện. Và trong trường hợp này, chúng ta có 14 chữ cái. Vì vậy, tôi sẽ sử dụng 14 bước, mỗi bước cho một chữ cái. Vì vậy, nếu tôi lưu nó và xem trước một tệp, chúng tôi sẽ bắt đầu thấy việc bạn gõ có hiệu lực. Các chữ cái xuất hiện cùng một lúc khi h1 mở rộng và đó là nhờ chức năng các bước. Còn một điều nữa chúng tôi muốn thêm vào để có được hiệu ứng đầy đủ này. Và đó là con trỏ nhấp nháy. Ngay bây giờ, nó chỉ là loại đi chơi. Vì vậy, hãy cung cấp cho nó một hình ảnh động. Và chúng tôi cũng sẽ sử dụng các bước để có được hiệu ứng nhấp nháy đó. Vì vậy, chúng tôi sẽ quay lại CSS của chúng tôi. Và những gì chúng ta sẽ làm là áp dụng cả khung phím nhấp nháy và khung phím gõ cho h1 của chúng ta. Gõ sẽ điều chỉnh độ rộng để hiển thị các chữ cái và nhấp nháy sẽ điều chỉnh màu đường viền ở phía bên phải để tạo con trỏ của chúng tôi. Khi chúng ta áp dụng nhiều hoạt ảnh cho một phần tử, sẽ dễ dàng hơn rất nhiều nếu chúng ta bắt đầu sử dụng tốc ký hoạt ảnh. Vì vậy, tôi sẽ lấy những gì chúng ta có ngay tại đây và thay thế nó bằng phiên bản tốc ký, để dễ dàng thêm hoạt ảnh thứ hai hơn. Vì vậy, đối với phiên bản tốc ký của chúng ta, chúng ta sẽ sử dụng thuộc tính hoạt hình và đặt cho nó tên hoạt hình là typing. Chúng tôi sẽ cung cấp cho nó một khoảng thời gian ba giây. Số đầu tiên với thời gian được liên kết với nó trong tốc ký sẽ được sử dụng làm thời lượng. Và chúng tôi biết chúng tôi muốn ba giây. Đó là những gì chúng tôi đã sử dụng trước đây. Và tôi sẽ cung cấp cho nó chức năng định thời gian hoạt hình của các bước. Và chúng tôi sử dụng 14 ở đó trước đây, vì vậy chúng tôi sẽ sử dụng lại 14 ở đó. Vì vậy, đây là phiên bản tốc ký của những gì chúng tôi đã viết vài giây trước. Bây giờ tôi sẽ đặt dấu phẩy ở đây để tách hai hoạt ảnh của chúng ta. Và tôi muốn chuyển sang một dòng mới vì nó dễ đọc hơn, nhưng điều đó hoàn toàn không bắt buộc. Vì vậy, tôi sẽ thêm một hình ảnh động nhấp nháy thứ hai. Điều đó sẽ dành cho con trỏ, là đường viền trên h1 của chúng tôi. Chúng tôi sẽ cung cấp cho nó một khoảng thời gian là 0. 5 giây vì quá trình nhấp nháy sẽ diễn ra khá nhanh. Và chúng tôi cũng sẽ cung cấp cho nó chức năng định thời gian hoạt hình của các bước. Và chúng ta sẽ thực hiện điều này, từng bước một. Và chúng ta cũng sẽ bảo nó lặp lại vô hạn. Vì vậy, về cơ bản đó là số lần lặp hoạt ảnh vô hạn. Vì để trông giống con trỏ thực, chúng tôi muốn nó nhấp nháy ngay cả khi chúng tôi ngừng gõ. Vì vậy, nếu chúng tôi lưu cái này và xem trước nó ngay bây giờ, chúng tôi sẽ có các chữ cái của chúng tôi hiển thị cùng một lúc khi gõ nhờ hoạt ảnh khung phím gõ của chúng tôi. Và chúng tôi có con trỏ nhấp nháy nhờ hoạt ảnh nhấp nháy của chúng tôi. Cả hai đều được cung cấp bởi chức năng thời gian các bước. Vì vậy, đó là cái nhìn nhanh của chúng tôi về chức năng các bước cho hoạt ảnh CSS và kiểu giao diện mà nó có thể mang lại cho hoạt ảnh của bạn. Các bước không có xu hướng được sử dụng thường xuyên như các chức năng thời gian khác, nhưng bạn vẫn nên biết về những thời điểm khi đó là giải pháp phù hợp cho những gì bạn cần