Trình tạo chuyển tiếp CSS3

Chuyển đổi độ mờ mượt mà

Cài đặt trước phổ biến

Hiệu ứng mờ dần

Chuyển đổi độ mờ mượt mà

Hiệu ứng tỷ lệ

Thay đổi kích thước phần tử khi di chuột

Hiệu ứng xoay

Xoay phần tử khi di chuột

Hiệu ứng trượt

Di chuyển vị trí phần tử

Thay đổi màu sắc

Chuyển đổi màu nền

Giới thiệu về Chuyển tiếp

Chuyển đổi CSS cho phép bạn thay đổi các giá trị thuộc tính một cách mượt mà, trong một khoảng thời gian nhất định.

Các thuộc tính hoạt hình phổ biến bao gồm:

  • chiều rộng, chiều cao
  • lề, đệm
  • độ mờ, màu sắc
  • transform (scale, rotate, translate)
  • background-color

Mẹo chuyên nghiệp: Sử dụng tùy chọn 'Tất cả thuộc tính' để tạo hiệu ứng cho tất cả các thay đổi.

Preview

HOVER ME

Mã được tạo

.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; }  .element:hover { /* Hover styles will be generated here */ }

Kiểm soát chuyển tiếp

300
0

Hiệu ứng di chuột

100%
100%
0px
0px
8px
8px

Related Tools