Thuộc tính transition trong CSS - Xác định một quá trình chuyển đổi khi có một hành độ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ị;
    -ms-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.
  • -ms-transition hỗ trợ cho IE.

transition có các giá trị như sau:
Thuộc tínhgiá trịVí dụMô tả
transition-propertynonetransition-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.
alltransition-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-durationThời giantransition-duration: 10s;Quá trình chuyển đổi mất bao nhiêu thời gian.
transition-timing-functioneasetransition-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-intransition-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-outtransition-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-outtransition-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.
lineartransition-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-delaythời giantransition-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


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
Đăng lúc Mục: ,

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)