Thuộc tính transition

Định nghĩa và sử dụng

Thuộc tính transition xác định một quá trình chuyển đổi khi có một hành động.

Cấu trúc

tag {
    transition: giá trị;
    -moz-transition: giá trị;
    -webkit-transition: giá trị;
    -o-transition: giá trị;
}

Trong đó:

  • -moz-transition hỗ trợ cho firefox.
  • -webkit-transition hỗ trợ cho Google Chrome và Safari.
  • -o-transition hỗ trợ cho Opera.

transition có các giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
transition-property none transition-property: none; Hiệu ứng của quá trình chuyển đổi sẽ không được hiển thị.
width
height
transition-property: height; Xác định hiệu ứng của quá trình chuyển đổi cho các thuộc tính css, mỗi thuộc tính cách nhau bằng dấu phẩy.
all transition-property: all; Xác định hiệu ứng của quá trình chuyển đổi cho tất cả thuộc tính.
transition-duration Thời gian transition-duration: 10s; Quá trình chuyển đổi mất bao nhiêu thời gian.
transition-timing-function ease transition-timing-function: ease; Xác định một hiệu ứng của quá trình chuyển đổi với một sự khởi đầu chậm, sau đó nhanh chóng, sau đó kết thúc chậm.
ease-in transition-timing-function: ease-in; Xác định một hiệu ứng của quá trình chuyển đổi với một khởi đầu chậm chạp.
ease-out transition-timing-function: ease-out; Xác định một hiệu ứng của quá trình chuyển đổi với một kết thúc chậm.
ease-in-out transition-timing-function: ease-in-out; Xác định một hiệu ứng của quá trình chuyển đổi với một khởi đầu và kết thúc chậm.
linear transition-timing-function: linear; Xác định một hiệu ứng của quá trình chuyển đổi với cùng một tốc độ từ đầu đến cuối.
cubic-bezier(n,n,n,n) transition-timing-function: cubic-bezier(0,1,0.35,0); Xác định giá trị cho hiệu ứng của quá trình chuyển đổi theo từng giai đoạn, giá trị xác định chỉ có thể từ 0 tới 1.
transition-delay thời gian transition-delay: 3s; Xác định thời gian chờ đợi trước khi các hiệu ứng của quá trình chuyển đổi sẽ bắt đầu.
transition [property] [duration] [timing-function] [delay] transition: height 2s ease 3s; Đây là thuộc tính tập hợp các thuộc tính trên.

HTML viết:

<html>
<head></head>
<body>
<p>transition</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

transition

CSS viết:

p {
    background: #cc0000;
    transition: height 2s;
    -moz-transition: height 2s;
    -webkit-transition: height 2s;
    -o-transition: height 2s;
    height: 23px;
    width: 120px;
}

p:hover {
    height: 100px;
}

Hiển thị trình duyệt khi có CSS:

transition

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính transition:

  Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
transition-property 9
X
4
-moz-
5
-o-
4
-webkit-
3
-webkit-
3.2
-webkit-
2.1
-webkit-
8
X
transition-duration 9
X
4
-moz-
5
-o-
4
-webkit-
3
-webkit-
3.2
-webkit-
2.1
-webkit-
8
X
transition-timing-function 9
X
4
-moz-
5
-o-
4
-webkit-
3
-webkit-
3.2
-webkit-
2.1
-webkit-
8
X
transition-delay 9
X
4
-moz-
5
-o-
4
-webkit-
3
-webkit-
3.2
-webkit-
2.1
-webkit-
8
X
transition 9
X
4
-moz-
5
-o-
4
-webkit-
3
-webkit-
3.2
-webkit-
2.1
-webkit-
8
X