Hướng dẫn transition image css - css hình ảnh chuyển tiếp

• Trang chủ
• Tham khảo
• CSS
• CSS3
• 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 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:

transition

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

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:

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS3
• transition

transition là gì?

transition

0 giúp cho việc chuyển đổi từ trạng thái này sang trạng thái khác được mượt mà hơn.

Ứng dụng của

transition

0 rất lớn, như việc sử dụng hiệu ứng cho các button khi hover, các box item sản phẩm, hay cả việc viết các chuyển động ...

Cấu trúc cơ bản

tag {
    transition: property time;
}

Giá trị	VD	Mô tả
property	width height color opacity ... height color opacity ...	Là thuộc tính của CSS
time	0.3s	Là thời gian của việc chuyển trạng thái

Cách sử dụng

HTML viết:

Hover me!

CSS viết - khi chưa sử dụng

transition

0:

p {
    background-color: #ffcccc;
    height: 50px;
    width: 100px;
}

Hiển thị trình duyệt:

Bây giờ ta sẽ làm vài ví dụ về việc sử dụng

transition

0 nhé:

TRANSITION VỚI CHIỀU CAO

p {
    background-color: #ffcccc;
    height: 50px;
    transition: height 0.4s;
    width: 100px;
}

p:hover {
    height: 50px;
}

Hiển thị trình duyệt:

Di chuyển chuột vào "Hover me!" ta sẽ thấy box được thay đổi chiều cao một cách từ từ.

TRANSITION VỚI CHIỀU RỘNG

p {
    background-color: #ffcccc;
    height: 50px;
    transition: width 0.4s;
    width: 100px;
}

p:hover {
    width: 250px;
}

Hiển thị trình duyệt:

Di chuyển chuột vào "Hover me!" ta sẽ thấy chiều rộng box sẽ được thay đổi.

TRANSITION VỚI BACKGROUND

p {
    background-color: #ffcccc;
    height: 50px;
    transition: background-color 0.4s;
    width: 100px;
}

p:hover {
    background-color: #ffffcc;
}

Hiển thị trình duyệt:

Di chuyển chuột vào "Hover me!" ta sẽ thấy

transition

4 của box sẽ được thay đổi.

TRANSITION VỚI TẤT CẢ CÁC GIÁ TRỊ

p {
    background-color: #ffcccc;
    height: 50px;
    transition: all 0.4s;
    width: 100px;
}

p:hover {
    background-color: #ffffcc;
    height: 100px;
    width: 250px;
}

Hiển thị trình duyệt:

Di chuyển chuột vào "Hover me!" ta sẽ thấy background, chiều rộng, chiều cao của box sẽ được thay đổi.

Đó là một trong những ví dụ cơ bản nhất, giúp bạn hiểu cách sử dụng

transition

0 như thế nào, với kiến thức nhỏ trên, cộng với sự sáng tạo của riêng bạn, bạn hoàn toàn có thể sáng tạo nhiều hiệu ứng chuyển động khác nhau, tất nhiên

transition

0 còn rất nhiều tính năng khác, bạn có thể tìm hiểu thêm tại tham khảo transition