Hướng dẫn tạo chuyển động với CSS transition cơ bản – Only Css Menu

CSS transition được sử dụng rộng rãi trong thiết kế website nhằm tạo ra những hiệu ứng hấp dẫn, thu hút người xem và giúp website trở nên ấn tượng hơn. Vậy transition là gì? Các chức năng của transition là gì? Cách sử dụng transition ra sao? Bài viết này sẽ giúp bạn hiểu hơn về thuộc tính transition và hướng dẫn tạo chuyển động với transition một cách dễ dàng.
Transition là thuật ngữ chỉ sự chuyển động, chuyển đổi. Trong thiết kế web, transition là việc chuyển đổi từ trạng thái này sang trạng thái khác một cách mượt mà hơn.
Transition được sử dụng phổ biến trong việc thiết kế website hiệu ứng hấp dẫn như dịch chuyển, xoay, thu, phóng,… nhằm giúp tạo nên ấn tượng đẹp mắt cho người nhìn.
Chức năng chủ yếu của nhóm thuộc tính transition nhằm dùng để thiết lập các hiệu ứng luôn chuyển giá trị cho một thuộc tính nào đó của một phần từ. Tức là chuyển đổi phần tử từ trạng thái này sang trạng thái khác.
Ví dụ: Một phần tử ở bên dưới có mặc định kích thước chiều rộng là 500px, khi bạn di chuyển con trỏ đến hình ảnh đó thì hình ảnh đó có thể đột ngột phóng to kích thước lên 800px hoặc 1000px.
Nhưng việc sử dụng nhóm CSS transition có thể giúp thiết lập các hiệu ứng luân chuyển giá trị cho thuộc tính width của phần tử giúp tăng chiều rộng một cách từ từ, người dùng sẽ cảm thấy sự mượt mà, thú vị và bắt mắt hơn.
Dưới đây là các thuộc tính transition cơ bản nhất được sử dụng trong CSS mà bạn có thể tham khảo:
Là cú pháp tổng quát dùng để thiết lập các hiệu ứng luân chuyển giá trị cho thuộc tính của phân tử. Thay vì kết hợp các thuộc tính transition riêng lẻ, bạn có thể sử dụng một thuộc tính transition là đủ.
Cú pháp: transition – property duration timing – function delay. Trong đó, property, duration, timing – function, delay lần lượt là giá trị của 4 thuộc tính:
Mặc dù vậy, thuộc tính transition không bắt buộc phải gán ghép đủ 4 giá trị trên. Những giá trị thuộc tính nào còn thiếu thì trình duyệt sẽ tự động áp dụng một giá trị mặc định của thuộc tính đó.
Thuộc tính transition – property được dùng để xác định thuộc tính mà bạn muốn tạo hiệu ứng luân chuyển giá trị cho nó khi phân tử đó thay đổi trạng thái.
Cú pháp: Transition – property: value. Trong đó, value có thể được xác định dựa theo một trong 5 giá trị sau:
Lưu ý: Nếu bạn muốn tạo nên hiệu ứng luân chuyển gia trị cho nhiều thuộc tính (nhưng không phải là tất cả) thì khi thiết lập giá trị cho thuộc tính này, bạn cần phải khai báo đầy đủ tên của những thuộc tính bạn muốn tạo hiệu ứng luân chuyển giá trị cho nó. Và đừng quên thêm một dấu “,” nằm ngăn cách giữa các thuộc tính.
Thuộc tính dùng để thiết lập “thời thượng” của hiệu ứng luân chuyển giá trị. Giúp xác định được thời gian bao nhiêu giây – s hay mili giây – s mà hiệu ứng transition cần để hoàn thành.
Cú pháp: time initial inherit. Trong đó: transition – duration được xác định với 3 giá trị thuộc tính sau:
Thuộc tính transition – delay dùng để xác định khoảng thời gian mà hiệu ứng transition cần để bắt đầu, với giá trị được tính bằng giây (s) hoặc mili giây (ms). Giá trị bằng 0.
Cú pháp: time initial inherit. Trong đó:
Là một thuộc tính sử dụng khi một hiệu ứng luân chuyển giá trị diễn ra thì mặc định hiệu ứng sẽ chuyển động chậm ở giai đoạn đầu, nhanh dần ở giai đoạn giữa và chậm lại ở giai đoạn cuối.
Việc sử dụng thuộc tính transition – timing – function có thể giúp thiết lập lại tốc độ chuyển động của hiệu ứng ở từng giai đoạn.
Cú pháp: value. Trong đó, value được xác định dựa theo 7 loại giá trị sau:
Nếu nhìn qua, các thuộc tính của transition và animation tương đối giống nhau, vì đều tạo ra những hiệu ứng chuyển động cho phần tử. Tuy nhiên, hiệu ứng chuyển động thuộc nhóm transition sẽ chỉ xảy ra khi phần tử bị thay đổi trạng thái do sự tác động của người dùng. Còn hiệu ứng chuyển động của nhóm thuộc tính animation thì được thiết kế theo một khuôn khổ sẵn có, chuyển động bất kỳ lúc nào mà không phụ thuộc vào tác động của người dùng.
Bạn có thể sử dụng các loại chuyển đổi thuộc tính để biến đổi hiển thị phần từ như dịch chuyển, thu phóng, xoay,… Hiệu ứng chuyển đổi cũng có thể sử dụng cho nhiều thuộc tính của CSS như background – color, height, width, opacity,…
Ví dụ: Tạo hiệu ứng thay đổi chiều rộng box khi di chuột ra vào phần tử, hiệu ứng trong 3s


See the Pen Hướng dẫn chia cột với float by Phan Đỗ Hoàng Nhật

(@hoangnhata2) on CodePen.

Ví dụ: Tạo hiệu ứng xoay với rotate: Xoay phần tử đi khoảng 45 độ


See the Pen Hướng dẫn chia cột với float by Phan Đỗ Hoàng Nhật

(@hoangnhata2) on CodePen.

Lưu ý: Mặc định gốc quay phần tử là ở giữa của phần tử, được thiết lập bằng thuộc tính transition – origin. Mặc định thì transform – origin sẽ là 50% 50 % chính là giữa phần tử.
Nếu thay góc quay là ở góc thứ nhất transform – origin sẽ là 0% 0% hoặc transform – origin: top left.
Lưu ý: Nghiên phần tử skew sẽ sử dụng phương thức skew (x – angle, y – angle).


See the Pen Hướng dẫn chia cột với float by Phan Đỗ Hoàng Nhật

(@hoangnhata2) on CodePen.

Lưu ý: Phương thức sử dụng translate (x,y) để thay đổi vị trí phần tử thêm một đoạn x, y nào đó.


See the Pen Hướng dẫn chia cột với float by Phan Đỗ Hoàng Nhật

(@hoangnhata2) on CodePen.

Lưu ý: Zoom phần tử sẽ sử dụng phương thức scale (x – scale, y – scale).
Ví dụ: Kết hợp hiệu ứng xoay và dịch chuyển đồng thời.
<style>

    div
.
multi 
{

        width
:
 
200px
;

        height
:
 
100px
;

        background
-
color
:
 
#8BC34A;

        transform
:
 rotate
(
45deg
)
 translate
(
50px
);

        color
:
white
;

        padding
:
 
30px
;
    
}
</style>

<div
 
class
=
"multi"
>
rotate(45deg) translate(100px);
</div>