Ví dụ về thuộc tính transition

Thuộc tính transition

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

HTML viết:

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

CSS viết:

p {
    background: #cc0000;
    height: 23px;
    width: 80px;
}

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

transition

Thêm thuộc tính transition, CSS viết:

p {
    background: #cc0000;
    height: 23px;
    width: 80px;
    transition: width 2s ease 0s;
    -moz-transition: width 2s ease 0s;
    -webkit-transition: width 2s ease 0s;
    -o-transition: width 2s ease 0s;
    -ms-transition: width 2s ease 0s;
}

p:hover {
    width: 100%;
}

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

transition

Di chuyển con trỏ chuột vào thành phần để thấy hiệu ứng.

Thuộc tính transition-property

Thuộc tính transition-property: Quá trình chuyển đổi mất bao nhiêu thời gian.

Thêm thuộc tính transition-property, CSS viết:

p {
    background: #cc0000;
    height: 23px;
    width: 80px;
    transition-property: height;
    -moz-transition-property: height;
    -webkit-transition-property: height;
    -o-transition-property: height;
    -ms-transition-property: height;
}

p:hover {
    height: 100px;
}

Hiển thị trình duyệt khi có transition-property

transition

Di chuyển con trỏ chuột vào thành phần để thấy hiệu ứng.

Một số giá trị cho transition-property

Ví dụ Hiển thị
width: Xác định một hiệu ứng của quá trình chuyển đổi theo chiều rộng. 
p {
    background: #cc0000;
    height: 23px;
    width: 80px;
    transition-property: width;
    -moz-transition-property: width;
    -webkit-transition-property: width;
    -o-transition-property: width;
    -ms-transition-property: width;
}

p:hover {
    width: 100%;
}

transition
height: Xác định một hiệu ứng của quá trình chuyển đổi theo chiều cao. 
p {
    background: #cc0000;
    height: 23px;
    width: 80px;
    transition-property: height;
    -moz-transition-property: height;
    -webkit-transition-property: height;
    -o-transition-property: height;
    -ms-transition-property: height;
}

p:hover {
    height: 60px;
}

transition
all: Xác định một hiệu ứng của quá trình chuyển đổi theo chiều rộng và chiều cao. 
p {
    background: #cc0000;
    height: 23px;
    width: 80px;
    transition-property: all;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
}

p:hover {
    height: 60px;
    width: 100%;
}

transition

Thuộc tính transition-duration

Thuộc tính transition-duration: Quá trình chuyển đổi mất bao nhiêu thời gian.

Thêm thuộc tính transition-duration, CSS viết:

p {
    background: #cc0000;
    height: 23px;
    width: 80px;
    transition: width 2s ease 0s;
    transition-duration: 10s;
    -moz-transition: width 2s ease 0s;
    -moz-transition-duration: 10s;
    -webkit-transition: width 2s ease 0s;
    -webkit-transition-duration: 10s;
    -o-transition: width 2s ease 0s;
    -o-transition-duration: 10s;
    -ms-transition: width 2s ease 0s;
    -ms-transition-duration: 10s;
}

p:hover {
    width: 100%;
}

Hiển thị trình duyệt khi có transition-duration

transition

Di chuyển con trỏ chuột vào thành phần để thấy hiệu ứng.

Một số giá trị cho transition-duration

Ví dụ Hiển thị
transition-duration: 2s;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
-ms-transition-duration: 2s;

transition
transition-duration: 5s;
-moz-transition-duration: 5s;
-webkit-transition-duration: 5s;
-o-transition-duration: 5s;
-ms-transition-duration: 5s;

transition
transition-duration: 10s;
-moz-transition-duration: 10s;
-webkit-transition-duration: 10s;
-o-transition-duration: 10s;
-ms-transition-duration: 10s;

transition

Thuộc tính transition-timing-function

Thuộc tính transition-timing-function: Xác định dạng của quá trình chuyển đổi.

Thêm thuộc tính transition-timing-function, CSS viết:

p {
    background: #cc0000;
    height: 23px;
    width: 80px;
    transition: width 2s ease 0s;
    transition-timing-function: ease;
    -moz-transition: width 2s ease 0s;
    -moz-transition-timing-function: ease;
    -webkit-transition: width 2s ease 0s;
    -webkit-transition-timing-function: ease;
    -o-transition: width 2s ease 0s;
    -o-transition-timing-function: ease;
    -ms-transition: width 2s ease 0s;
    -ms-transition-timing-function: ease;
}

p:hover {
    width: 100%;
}

Hiển thị trình duyệt khi có transition-timing-function

transition

Di chuyển con trỏ chuột vào thành phần để thấy hiệu ứng.

Một số giá trị cho transition-duration

Ví dụ Hiển thị
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.
transition-timing-function: ease;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
-ms-transition-timing-function: ease;

transition
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.
transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-ms-transition-timing-function: ease-in;

transition
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.
transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;

transition
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.
transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;

transition
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.
transition-timing-function: linear;
-moz-transition-timing-function: linear;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
-ms-transition-timing-function: linear;

transition
cubic-bezier(n,n,n,n): 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-timing-function: cubic-bezier(0,1,0.35,0);
-moz-transition-timing-function: cubic-bezier(0,1,0.35,0);
-webkit-transition-timing-function: cubic-bezier(0,1,0.35,0);
-o-transition-timing-function: cubic-bezier(0,1,0.35,0);
-ms-transition-timing-function: cubic-bezier(0,1,0.35,0);

transition

Thuộc tính transition-delay

Thuộc tính transition-delay: 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.

Thêm thuộc tính transition-delay, CSS viết:

p {
    background: #cc0000;
    height: 23px;
    width: 80px;
    transition: width 2s ease 0s;
    transition-delay: 3s;
    -moz-transition: width 2s ease 0s;
    -moz-transition-delay: 3s;
    -webkit-transition: width 2s ease 0s;
    -webkit-transition-delay: 3s;
    -o-transition: width 2s ease 0s;
    -o-transition-delay: 3s;
    -ms-transition: width 2s ease 0s;
    -ms-transition-delay: 3s;
}

p:hover {
    width: 100%;
}

Hiển thị trình duyệt khi có transition-delay

transition

Di chuyển con trỏ chuột vào thành phần và giữ yên để thấy hiệu ứng.

Một số giá trị cho transition-delay

Ví dụ Hiển thị
transition-delay: 1s;
-moz-transition-delay: 1s;
-webkit-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;

transition
transition-delay: 3s;
-moz-transition-delay: 3s;
-webkit-transition-delay: 3s;
-o-transition-delay: 3s;
-ms-transition-delay: 3s;

transition
transition-delay: 5s;
-moz-transition-delay: 5s;
-webkit-transition-delay: 5s;
-o-transition-delay: 5s;
-ms-transition-delay: 5s;

transition