Hướng dẫn 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

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:

Bất động sản Sự miêu tả
transition-property thuộc tính CSS sẽ chuyển đổi
transition-duration thời gian của quá trình chuyển đổi
transition-timing-function hàm thời gian được hoạt ảnh sử dụng (các giá trị chung: tuyến tính, dễ dàng). Mặc định: dễ dàng
transition-delay số giây tùy chọn để chờ trước khi bắt đầu hoạt ảnh

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.one.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:

Giá trị
tuyến tính
giảm bớt
dễ dàng trong
thoải mái
dễ vào

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:

Debug CSS Transitions in Chrome DevTools

Đây là Firefox:

Debug CSS Transitions in Firefox DevTools

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 đủ:

Bất động sản
lý lịch
màu nền
nền-vị trí
kích thước nền
biên giới
màu viền
chiều rộng biên giới
đường viền dưới cùng
đường viền-dưới cùng-màu
viền-dưới-trái-bán kính
viền-dưới-bên phải-bán kính
viền-dưới-độ rộng
biên giới bên trái
viền-trái-màu
viền-trái-chiều rộng
bán kính biên giới
biên giới bên phải
viền-phải-màu
viền-phải-rộng
khoảng cách giữa các đường viền
biên giới
màu viền trên cùng
bán kính đường viền trên cùng bên trái
bán kính đường viền trên cùng bên phải
chiều rộng đường viền
đáy
bóng hộp
dấu mũ màu
kẹp
màu sắc
số cột
cột-khoảng cách
quy tắc cột
cột-quy-tắc-màu
cột-quy tắc-chiều rộng
chiều rộng cột
cột
Nội dung
bộ lọc
uốn dẻo
cơ sở linh hoạt
uốn cong
uốn cong
nét chữ
cỡ chữ
phông chữ-kích thước-điều chỉnh
phông chữ kéo dài
font-weight
vùng lưới
lưới-tự động-cột
lưới-dòng chảy tự động
lưới-tự động-hàng
lưới-cột-kết thúc
lưới-cột-khoảng cách
lưới-cột-bắt đầu
cột lưới
khoảng cách lưới
lưới-hàng-kết thúc
lưới-hàng-khoảng cách
lưới-hàng-bắt đầu
hàng lưới
lưới-mẫu-khu vực
lưới-mẫu-cột
lưới-mẫu-hàng
lưới-mẫu
lưới
Chiều cao
trái
khoảng cách giữa các chữ cái
chiều cao giữa các dòng
lề
margin-bottom
lề trái
lề phải
margin-top
chiều cao tối đa
chiều rộng tối đa
chiều cao tối thiểu
chiều rộng tối thiểu
sự mờ đục
đặt hàng
đề cương
màu phác thảo
phác thảo-bù đắp
chiều rộng đường viền
đệm lót
padding-bottom
padding-left
padding-right
padding-top
Góc nhìn cá nhân
quan điểm-nguồn gốc
dấu ngoặc kép
đúng
kích thước tab
trang trí văn bản
văn bản-trang trí-màu sắc
thụt lề văn bản
bóng văn bản
hàng đầu
biến đổi.
căn chỉnh theo chiều dọc
hiển thị
chiều rộng
khoảng cách từ
chỉ số z

Tải xuống miễn phí của tôiSổ tay CSS


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