Hướng dẫn transition: all css

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	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:

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

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:

Một trong các kỹ thuật phổ biến ở các website hiện đại là có các hiệu ứng chuyển động cho từng đối tượng rất đẹp mắt được làm hoàn toàn bằng CSS3, khi mà trước đây đa phần các hiệu ứng chuyển động phải cần có sự trợ giúp của Javascript. Trong CSS3 có thuộc tính transition giúp bạn tạo ra các hiệu ứng chuyển động của một đối tượng tron website dễ dàng mà không cần phải dùng thêm Javascript.

Cấu trúc khai báo transition như sau:

transition: [thuộc tính chuyển động] [thời gian chuyển động] [thời gian delay] [kiểu chuyển động];

Lưu ý rằng transition là thuộc tính CSS3 nên bạn cần nên khai báo thêm hai thuộc tính tương tự kèm hai tiền tố -moz- và -webkit- để nó hoạt động tốt trên mọi trình duyệt. Ví dụ:



#box {

  transition: margin-left 2s 0.5s ease-in-out;

  -moz-transition: margin-left 2s 0.5s ease-in-out;

  -webkit-transition: margin-left 2s 0.5s ease-in-out;

}

Trong đó, margin-left là thuộc tính mà bạn cần nó sẽ kích hoạt chuyển động nhưng không phải thuộc tính nào cũng có thể chuyển động mà nó chỉ có tác dụng với các hiệu ứng trong danh sách này, bạn có thể sửa thành all để nó áp dụng lên toàn bộ thuộc tính, 2s là thời gian diễn ra sự chuyển động và 0.5s là thời gian trễ khi sự kiện bắt đầu, ease-in-out là kiểu chuyển động nhanh ở lúc bắt đầu và chậm ở lúc kết thúc. Phần kiểu chuyển động bạn có thể không cần khai báo, hãy xem thêm các kiểu chuyển động tại đây.

Bây giờ bạn đã khai báo cho #box áp dụng hiệu ứng chuyển động rồi, nhưng để vậy nó sẽ không chuyển động mà sẽ bắt buộc có thêm một sự kiện xảy ra để nó kích hoạt. Ví dụ mình sẽ viết thêm CSS với pseudo-class là :hover để tiến hành sửa giá trị margin-right và lúc này nó sẽ chuyển động dựa theo giá trị mới.

#box:hover {

  margin-left: 150px;

}

Bạn xem ví dụ live ở dưới.

[codepen id=”PwMjLK”]

Tóm lại khi tạo hiệu ứng chuyển động là bạn phải đặt thuộc tính transition vào phần tử muốn làm chuyển động, và nhớ khai báo thuộc tính chuyển động. Sau đó bạn phải thiết lập thêm sự kiện chuyển động thông qua các pseudo class hoặc thậm chí là Javascript nếu bạn biết ngôn ngữ này.

Ngoài ra, bạn còn có thể thiết lập chuyển động cho nhiều thuộc tính khác nhau bằng cách thêm dấu phẩy như dưới đây.



#box {

  transition: margin-left 2s, background-color 1s;

  -moz-transition: margin-left 2s, background-color 1s;

  -webkit-transition: margin-left 2s, background-color 1s;

}

Ví dụ thực tế:

[codepen id=”yymoLZ”]

Đơn giản phải không nào? Hy vọng là với kiến thức về transition thì bạn sẽ cảm thấy mình làm được nhiều điều thú vị hơn với CSS và thực tế còn rất nhiều cái thú vị nữa mà mình sẽ tiếp tục hướng dẫn ở các bài sau.

Thạch Phạm

Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.

Hướng dẫn transition: all css

Định nghĩa và sử dụng

Cấu trúc

HTML viết:

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

CSS viết:

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

Thạch Phạm

Bài Viết Liên Quan

Có thể bạn quan tâm

Toplist được quan tâm

Quảng Cáo

Xem Nhiều

Chủ đề

Quảng Cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội