Transition – Thủ thuật CSS – 2

Name: Transition – Thủ thuật CSS – 2
Ingredients: Transition là gì và cách dùng ?

Thủ thuật CSS phần 2 – Transition và cách dùng

Transition là gì và cách dùng ?

Transition là một tính năng trong CSS cho phép áp dụng các hiệu ứng chuyển tiếp mượt mà giữa các trạng thái của các phần tử HTML. Khi các thuộc tính của phần tử HTML được thay đổi, transition CSS cho phép bạn tạo ra các hiệu ứng chuyển tiếp mượt mà giữa các trạng thái đó.

Transition là một trong những thuộc tính hay dùng cho những trang web biến các trang tĩnh thành trang động chỉ với css.

Những thuộc tính của Transition.

Transition bao gồm các thuộc tính sau đây :

1. Transition-property : Xác định thuộc tính chuyển đổi.

Ví dụ:

transition-property: all | height | width .v.v. ; nghĩa là chuyển đổi tất cả thuộc tính hiện có hoặc theo mình setup

2. Transition-duration : Thời gian chuyển đổi.

Ví dụ:

transition-duration: 5s ; nghĩa là chuyển đổi hiệu ứng trong 5s

3. Transition-timing-function : Kiểu hiệu ứng chuyển đổi;

Ví dụ:

transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(x , x , x , x ) ;

Ease: 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: hiệu ứng của quá trình chuyển đổi với một khởi đầu chậm chạp.
Ease-out: hiệu ứng của quá trình chuyển đổi với một kết thúc chậm.
Ease-in-out: 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: 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: 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 đó x có giá trị từ 0 -> 1

4. Transition-delay: Thời gian trì hoãn trước khi chuyển đổi.

Ví dụ:

transition-delay: 3s; Nghĩa là sau 3 giây sẽ bắt đầu chuyển đổi theo hiệu ứng được setup

Transition: là tổng hợp tất cả những thuộc tính trên.

Ví dụ:

transition: all 3s ease-in 2s; Nghĩa là tất cả hiệu ứng sẽ được chuyển đổi sau 2 giây và thời gian chuyển đổi là 3 giây.

Cú pháp của transition:

selector {
  transition: [property] [duration] [timing-function] [time-delays] 
}

Ví dụ:

Cách dùng :

Transition sẽ không như hover nhưng lại liên quan đến hover hoặc một vài sự kiện liên quan nào đó, cụ thể mình sẽ đề cập kỹ hơn ở những bài sau. Ở bài này chúng ta chỉ hiểu và sử dụng được nó là ok rồi.
Chúng ta muốn hiệu ứng xuất hiện ở đâu thì đặt thuộc tính transition ở đó. Như ví dụ: ta muốn đặt transition trong class=”class-1″ thì thuộc tính kèm theo của class=”class-1″ sẽ có thêm transition.

.class-1 {
 thuộc tính .v.v.
 transition: thuộc tính setup ;
}

Và những thuộc tính chúng ta muốn chuyển đổi sẽ nằm trong setup hiệu ứng. Ví dụ của chúng ta là hiệu ứng hover.

.class-1:hover {
 /* Những thuộc tính này có thể thay đổi giá trị hoặc không thay đổi */
 thuộc tính chuyển đổi .v.v. ; 
}

*Lưu ý: Nếu chúng ta không cho thời gian chuyển đổi vào thì mặc định giá trị là 0, áp dụng cho cả delays.

Lời kết:

Như vậy chúng ta đã hiểu được phần nào về transition. Các bạn có thể dùng thuộc tính css này để áp dụng cho những chuyển động mượt mà hơn, bắt mắt hơn giúp trang web của bạn sẽ sống động hơn.

Mọi thắc mắc vui lòng comment bên dưới, mình sẽ giải đáp thắc mắc cho các bạn.