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

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 14/05/2016
• Tổng lược xem trang: 774 / 1 khách
• Đánh giá bởi người dùng:

Đị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. 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%;
}

Thêm thuộc tính transition-property. Xác định một hiệu ứng của quá trình chuyển đổi theo chiều cao. 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;
}

Thêm thuộc tính transition-property. Xác định một hiệu ứng của quá trình chuyển đổi theo chiều rộng. CSS viết:

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%;
}

Thêm thuộc tính transition-property. Xác định một hiệu ứng của quá trình chuyển đổi theo chiều cao và chiều rộng. CSS viết:

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%;
}

Thêm thuộc tính transition-duration, (hiệu ứng theo thời gian đã định). 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%;
}

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. CSS viết:

transition-timing-function: ease;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
-ms-transition-timing-function: ease;

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. CSS viết:

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;

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. CSS viết:

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;

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. CSS viết:

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;

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. CSS viết:

transition-timing-function: linear;
-moz-transition-timing-function: linear;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
-ms-transition-timing-function: linear;

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. CSS viết:

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);

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. 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%;
}

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt