Quẩy cùng transition-timing-function🎉

Chào các bạn, hôm nay tôi sẽ giới thiệu một chủ đề cực kỳ thú vị và đầy màu sắc: transition-timing-function trong CSS. Nếu bạn muốn biến trang web của mình thành một bữa tiệc đầy màu sắc và hoạt động mượt mà, bạn không thể bỏ qua bài viết này đâu!

💡 Nhớ nhé: transition-timing-function là một phần của thuộc tính transition trong CSS. Nó quy định cách mà transition chuyển từ trạng thái này sang trạng thái khác.

Mở đầu: Các bạn đã sẵn sàng? 🚀

Trước khi chúng ta bắt đầu với transition-timing-function, hãy xem qua một ví dụ đơn giản về transition nhé:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

.box:hover {
  width: 200px;
}

See the Pen box animation by minhchau (@ngocminhxx) on CodePen.

Khi bạn di chuột vào hình vuông này, chiều rộng sẽ tăng từ 100px lên 200px trong 2 giây. Tuy nhiên, sự chuyển đổi này hơi nhàm chán, phải không nào? Đây là lúc transition-timing-function vào cuộc!

Bước 1: Khám phá các giá trị của transition-timing-function 🕵️‍♂️

Có 5 giá trị cơ bản cho transition-timing-function:

1. ease: Chuyển đổi diễn ra chậm dần vào cuối (mặc định).
2. linear: Chuyển đổi diễn ra ở tốc độ đều.
3. ease-in: Chuyển đổi diễn ra chậm dần ở đầu.
4. ease-out: Chuyển đổi diễn ra chậm dần ở cuối.
5. ease-in-out: Chuyển đổi diễn ra chậm dần cả ở đầu và cuối.

Thử thay đổi giá trị của transition-timing-function trong ví dụ trên và xem sự khác biệt nhé:

.box {
  /* ... */
  transition: width 2s ease-out;
}

Bước 2: Tự tạo hàm timing với cubic-bezier 🧙‍♂️

Nếu như 5 giá trị cơ bản kể trên chưa đủ để bạn thỏa sức sáng tạo, cubic-bezier sẽ giúp bạn tạo ra những hàm timing độc đáo. Hàm cubic-bezier nhận 4 tham số từ 0 đến 1, ví dụ: cubic-bezier(0.1, 0.7, 1, 0.1).

Hãy thử thay đổi giá trị của transition-timing-function trong ví dụ trên và xem sự khác biệt nhé:

.box {
  /* ... */
  transition: width 2s cubic-bezier(0.1, 0.7, 1, 0.1);
}

Các bạn còn chần chừ gì nữa mà không nghịch ngợm với cubic-bezier để tạo ra những hiệu ứng chuyển đổi độc đáo cho trang web của mình? 🎊

cubic-bezier là gì?

Đường cong Bézier là một loại đường cong được sử dụng để xác định quỹ đạo của một đối tượng trong quá trình chuyển động bằng cách sử dụng các điểm kiểm soát để điều chỉnh hình dạng của đường cong.

Tương tự trong CSS, Cubic-bezier là một hàm trong CSS được sử dụng để xác định quỹ đạo của một đối tượng trong quá trình chuyển động. Nó được sử dụng để tạo các dạng transition đặc biệt mà không thể đạt được bằng các hàm đơn giản như linear hoặc ease-in-out.

Định dạng của hàm cubic-bezier() là:

cubic-bezier(p1x, p1y, p2x, p2y)

Trong đó p1x, p1y, p2x và p2y là các giá trị tọa độ của điểm kiểm soát. Các giá trị này phải nằm trong khoảng từ 0 đến 1.

Bạn có thể thị phạm thêm bằng inspect tool của Chrome, bằng cách click vào đây

Mình để ý một hồi thì nhận ra ease-in-out hay ease cũng là một dạng khác của hàm cubic-bezier

Kết luận: Quẩy cùng transition-timing-function 🕺💃

Với transition-timing-function, bạn đã có thêm một công cụ hữu ích để làm cho trang web của mình trở nên sống động và hấp dẫn

Tuy nhiên, cần lưu ý rằng khi sử dụng quá nhiều hiệu ứng chuyển động trên trang web, điều này có thể làm giảm trải nghiệm người dùng và khiến trang web của bạn trở nên chậm hơn. Vì vậy, hãy sử dụng các hiệu ứng chuyển động một cách hợp lý và tùy chỉnh chúng để đạt được hiệu quả tốt nhất.