Previous Lesson Next Lesson

Thuộc tính transition trong CSS3

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.

Ví dụ

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

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