Hiểu thêm về Transition 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.

Thuộc tính transition xác định một quá trình chuyển đổi khi có một hành động tác động vào nó. Ví dụ như hover, click, …

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:

Transitional Properties

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.

Điều quan trọng cần lưu ý là không phải tất cả các thuộc tính đều có thể chuyển đổi được. chỉ các thuộc tính có điểm giữa chừng có thể xác định được. Màu sắc, kích thước, phông chữ có thể chuyển đổi từ giá trị này sang giá trị khác. 

Transition duration


transition-duration
Thời gian transition-duration: 10s; Quá trình chuyển đổi mất bao nhiêu thời gian.

Transition timing


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.

Trong quá trình chuyển đổi transition có thời gian diễn ra bằng cách sử dụng transition-duration được xác định bằng các giá trị thời gian giây(s), mili giây (ms). Khi transition nhiều thuộc tính, bạn có thể đặt nhiều thời lượng cho mỗi thuộc tính và được cách nhau bằng dấu phẩy.

Transition delay

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.

Ngoài việc khai báo thuộc tính transition, timing, duration, bạn cũng có thể đặt delay với thuộc tính transition-delay với giá trị thời gian, giây hoặc mili giây. Như với tất cả các thuộc tính transition khác, delay nhiều lần, các giá trị cũng được cách nhau bằng dấu phẩy.

Transition

ransition [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.

 

Nguồn: Tổng hợp


098.778.2201
Chat Zalo