TL
Tool Lab
💰Donate
💰Donate

CSS Transition Generator

Configure CSS transitions with hover preview.

Chuyen tiep 1
Di chuot vao toi
.element {
  transition: all 0.3s ease 0s;
}

.element:hover {
  /* apply your hover styles here */
}

Giới thiệu công cụ

May tao CSS Chuyen Tiep giup ban cau hinh thuoc tinh tat transition bang cach dat thuoc tinh muc tieu, thoi gian, ham thoi gian va tre. Xem truoc tuong tac cho phep ban kiem tra hieu ung truoc khi sao chep ma.

CSS chuyen tiep tao ra cac thay doi trang thai muot giua hai gia tri CSS, duoc kich hoat boi cac lop gia nhu :hover, :focus hoac thay doi lop qua JavaScript.

Cách sử dụng

  1. Chon thuoc tinh CSS can chuyen tiep (hoac dung all).
  2. Dat thoi gian — chuyen tiep mat bao lau (vi du: 0.3s).
  3. Chon ham thoi gian de kiem soat duong cong gia toc.
  4. Tuy chon them tre truoc khi bat dau chuyen tiep.
  5. Di chuot qua hop xem truoc de xem hieu ung truc tiep, sau do sao chep CSS.

Trường hợp sử dụng

Lap trinh vien dung chuyen tiep cho hieu ung hover tren nut, phong to the va thay doi mau trong lien ket dieu huong. Nha thiet ke form dung cho style focus cua o nhap lieu.

Câu hỏi thường gặp

  • Su khac biet giua transition va animation la gi? — Chuyen tiep phan ung voi thay doi trang thai (nhu hover); animation chay tu dong hoac theo vong lap bang keyframes.
  • Toi co the chuyen tiep nhieu thuoc tinh khong? — Co. Nhan "Them chuyen tiep" de them nhieu quy tac thuoc tinh ngan cach bang dau phay.
  • Nhung thuoc tinh nao co the chuyen tiep? — Hau het cac thuoc tinh co gia tri so: opacity, color, transform, kich thuoc, v.v. Cac thuoc tinh nhu display khong the chuyen tiep.