CSS3 07 – CSS3 Transition

0
89

1. Giới thiệu về transition

Thuộc tính transtion cho phép chúng ta tạo ra các phần tử bằng cách thay đổi kích thước , màu sắc dựa trên hành vi của người dùng bằng các hiệu ứng chuyển động mượt mà trong một khoảng thời gian nhất định.

2. Cách sử dụng transition

Để sử dụng thuộc tính transition ta khai báo nó với cú pháp

Trong đó:

  • Thuộc tính: là thuộc tính css bạn muốn thêm hiệu ứng
  • Thời gian: Thời gian hiệu lực của hiệu ứng đó

Ví dụ để làm tăng width của một khối khi hover chuột vào khối với thời gian hiệu lực là 2s

See the Pen ZJXgxL by Cao Anh Nhất (@xeko995) on CodePen.dark

Ví dụ Tăng width kết hợp với giảm height

See the Pen ayLejE by Cao Anh Nhất (@xeko995) on CodePen.dark

Ví dụ Kết hợp transition kết hợp với transform

See the Pen mMBNzg by Cao Anh Nhất (@xeko995) on CodePen.dark

Từ các ví dụ trên các bạn có thể sáng tạo thêm các ví dụ khác nhằm tạo ra các hiệu ứng bắt mắt hơn trên website của mình.

Ngoài ra nếu các thuộc tính của bạn đều có thời gian hiệu lực như nhau thì các bạn có thể viết gọn cú pháp theo cách sau

Ví dụ

See the Pen oeGKOa by Cao Anh Nhất (@xeko995) on CodePen.dark

3. Làm trễ hiệu ứng transtion

Để làm trễ một hiệu ứng transtion ta sự dụng cú pháp sau

Ví dụ

See the Pen mMqbVb by Cao Anh Nhất (@xeko995) on CodePen.dark

 

 

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here