Hướng dẫn giới thiệu về Chuyển đổi CSS

• Giới thiệu về Chuyển đổi CSS
• Ví dụ về Chuyển đổi CSS
• Giá trị hàm thời gian chuyển đổi
• Chuyển đổi CSS trong Công cụ phát triển trình duyệt
• Thuộc tính nào bạn có thể tạo hoạt ảnh bằng cách sử dụng Chuyển tiếp CSS

Giới thiệu về Chuyển đổi CSS

Chuyển tiếp CSS là cách đơn giản nhất để tạo hoạt ảnh trong CSS.

Trong quá trình chuyển đổi, bạn thay đổi giá trị của một thuộc tính và bạn yêu cầu CSS từ từ thay đổi nó theo một số tham số, hướng tới trạng thái cuối cùng.

Chuyển tiếp CSS được xác định bởi các thuộc tính sau:

Cáctransitionthuộc tính là một cách viết tắt tiện dụng:

.container {
  transition: property duration timing-function delay;
}

Ví dụ về Chuyển đổi CSS

Mã này thực hiện một Chuyển đổi CSS:

.one,
.three {
  background: rgba(142, 92, 205, 0.75);
  transition: background 1s ease-in;
}
.two,
.four {
background: rgba(236, 252, 100, 0.75);
}
.circle:hover {
background: rgba(142, 92, 205, 0.25); /* lighter */
}

Xem ví dụ trên Glitchhttps://glitch.com/edit/#!/flavio-css-transitions-example

Khi di chuột.onevà.threecác yếu tố, các vòng tròn màu tím, có một hoạt ảnh chuyển tiếp giúp dễ dàng thay đổi nền, trong khi các vòng tròn màu vàng thì không, vì chúng không cótransitiontài sản xác định.

Giá trị hàm thời gian chuyển đổi

transition-timing-functioncho phép xác định đường cong gia tốc của quá trình chuyển đổi.

Có một số giá trị đơn giản bạn có thể sử dụng:

Trục trặc nàycho thấy chúng hoạt động như thế nào trong thực tế.

Bạn có thể tạo một hàm thời gian hoàn toàn tùy chỉnh bằng cách sử dụngđường cong bezier khối. Điều này khá tiên tiến, nhưng về cơ bản bất kỳ chức năng nào ở trên đều được xây dựng bằng cách sử dụng các đường cong bezier. Chúng tôi có những cái tên tiện dụng vì chúng là những cái tên phổ biến.

Chuyển đổi CSS trong Công cụ phát triển trình duyệt

CácCông cụ phát triển trình duyệtcung cấp một cách tuyệt vời để hình dung quá trình chuyển đổi.

Đây là Chrome:

Đây là Firefox:

Từ các bảng đó, bạn có thể chỉnh sửa trực tiếp quá trình chuyển đổi và thử nghiệm trong trang mà không cần tải lại mã của mình.

Thuộc tính nào bạn có thể tạo hoạt ảnh bằng cách sử dụng Chuyển tiếp CSS

Rất nhiều! Nhưng không phải tất cả các thuộc tính CSS.

Đây là danh sách đầy đủ:

Các hướng dẫn css khác:

• Hướng dẫn Flexbox
• Hướng dẫn về CSS Grid
• Biến CSS (Thuộc tính tùy chỉnh)
• Giới thiệu về PostCSS
• Thuộc tính lề CSS
• Cách căn giữa một phần tử bằng CSS
• Phông chữ Hệ thống CSS
• Cách in HTML của bạn với phong cách
• Hướng dẫn giới thiệu về Chuyển đổi CSS
• Hướng dẫn tạo ảnh động CSS
• Giới thiệu về CSS
• Hướng dẫn CSS
• Cách thiết lập Tailwind với PurgeCSS và PostCSS
• Tờ Tailwind Cheat
• Cách xoay liên tục hình ảnh bằng CSS
• Tạo bảng phản hồi bằng CSS
• Cách gỡ lỗi CSS bằng cách chia đôi
• Bộ chọn CSS
• Xếp tầng CSS
• Đặc tính CSS
• Bộ chọn thuộc tính CSS
• Màu sắc CSS
• Đơn vị CSS
• Url CSS ()
• Kiểu chữ CSS
• Mô hình hộp CSS
• Thuộc tính vị trí CSS
• Truy vấn phương tiện CSS và thiết kế đáp ứng
• Truy vấn tính năng CSS
• Chuyển đổi CSS
• Cách tạo kiểu danh sách bằng CSS
• Tiền tố nhà cung cấp CSS
• Kế thừa CSS
• Lớp giả CSS
• Phần tử giả CSS
• Tạo kiểu bảng HTML bằng CSS
• Thuộc tính Hiển thị CSS
• Hàm calc () CSS
• Đường viền CSS
• Nhập tệp CSS bằng @import
• Xử lý lỗi CSS
• Bộ lọc CSS
• Kích thước hộp CSS
• Nền CSS
• Nhận xét CSS
• Phông chữ CSS
• CSS Padding
• Thuộc tính float CSS và thanh toán bù trừ
• Chuẩn hóa CSS
• Thuộc tính CSS z-index
• Cách tắt lựa chọn văn bản bằng CSS
• Cách đặt một mục ở dưới cùng của vùng chứa bằng CSS
• Cách đảo màu bằng CSS
• Các thẻ pre đáp ứng trong CSS
• Nhúng video YouTube thích ứng
• Giá trị Điểm ngắt CSS tốt cho Thiết kế đáp ứng là gì?
• Cách căn giữa trong flexbox