Chậm rãi cùng CSS Transition
TIL
612
CSS3
52
White

Tấn Huy viết ngày 04/08/2018

CSS transition

CSS transition là gì?

Trước hết mình sễ không nói về khái niệm của CSS transition là gì mà chúng ta sẽ đi đến với hai ví dụ để dễ hiểu về transition hơn. Hai ví dụ dưới đây là về việc chuyển đổi vị trí của một khối vuông bằng transform:translate() và chuyển đổi màu background tuy nhiên với một cái là có transition và một cái thì không (rê chuột vào phần background màu xám để hiệu ứng diễn ra).
Không sử dụng transition:


Có sử dụng transition:


Như ta đã thấy rõ sự khác biệt khi sử dụng transition và không sử dụng transition như thế nào. Định nghĩa của transition (trích từ W3School): "CSS transitions allows you to change property values smoothly (from one value to another), over a given duration."

Note: Nếu như phần thời gian của transition (duration) không được chỉ định, thì sẽ không có hiệu ứng "mượt mà" xảy ra vì nó sẽ mặc định giá trị thời gian khi chúng ta không nêu là 0.

Định transition cho từng property

Như ở ví dụ có sử dụng transition ở trên chúng ta đã đặt transition và khiến nó diễn ra chậm rãi mượt mà hơn, tuy nhiên ở ví dụ trên chúng ta chuyển đổi cả hai property đó chính là transformbackground-colorvới cùng một thời gian là 2s với cách ghi transition:2s. Chúng ta có thể định riêng thời gian cho từng thuộc tính như sau transition:transform 3s, background-color 3s;, thì lúc này thời gian chuyển đổi của transform và 3s và background-color chỉ là 2s và tương tự nếu chúng ta có nhiều property hơn và cần đặt thời gian khác nhau, chỉ cần ghi hết ra và đặt cách nhau bằng dấu phẩy. Demo cho transition:transform 3s, background-color 3s; ở trên:

transition-timing-function

Chỉnh thời gian đã có, tuy nhiên chúng ta còn có các hiệu ứng khác nhau trong lúc chuyển đổi được gọi là transition-timing-function. đây là cách ghi cụ thể hoặc chúng ta có thể ghi gọn lại bằng cách chỉ dùng transition và ghi giá trị transition-timing-functionra phía sau phần thời gian, ví dụ transition:2s ease-in-out. transtion-timing-function có các giá trị khác nhau như sau:

  • ease: tạo hiệu ứng transition, khi bắt đầu thì chậm sau đó nhanh dần và gần kết thúc lại chậm từ từ (đây cũng là giá trị mặc định).
  • linear: tạo hiệu ứng transition, từ lúc bắt đầu với lúc kết thúc tốc độ là như nhau.
  • ease-in: tạo hiệu ứng transition, chậm ở lúc bắt đầu.
  • ease-out: tạo hiệu ứng transition, chậm ở lúc kết thúc.
  • ease-in-out: tạo hiệu ứng transition, chậm ở lúc bắt đầu và lúc kết thúc.

Xem demo dưới đây để rõ hơn (rê chuột vào phần background xám):

transition-delay

Như cái tên của nó - delay, nó dùng để quy định thời gian delay đến khi diễn ra hiệu ứng. Chúng ta sẽ lấy lại ví dụ ban đầu, tuy nhiên có thêm vào transition-delay:2s;


Như chúng ta đã thấy, khi rê chuột vào thì hiệu ứng không diễn ra ngay mà sẽ bị delay 2s - thời gian mà chúng ta đặt cho nó.

Viết tắc

Như cách ghi nãy giờ của mình là chỉ dùng transiton, tuy nhiên để phân rõ ra thì chúng ta có các property sau:

  • transition-property:dùng để xác định property nào được chọn để đặt transition.
  • transition-duration thời gian diễn ra của việc chuyển đổi property đã chọn.
  • transition-timing-function như đã nói ở trên.
  • transition-delay cũng đã nói ở trên.

Ở trên là cách ghi chi tiết, tuy nhiên chúng ta hoàn toàn có thể ghi tắc lại (nên ghi tắc lại, cho nhanh :laughing:). Ví dụ ta có cách ghi chi tiết cho một element div như sau:

div{
    transition-property:height;
    transition-duration:3s;
    transtion-timing-function:ease-in-out;
    transition-delay:2s;
}

Chúng ta có thể ghi tắc lại thành: transition:height 3s ease-in-out 2s (gọn hơn phải không nào :laughing:)

Link tham khảo

Link tham khảo ở w3school.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tấn Huy

17 bài viết.
6 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
11 2
Tạo thanh tìm kiếm với hiệu ứng "gậy như ý" bằng HTML và CSS Trong bài viết này chúng ta sẽ tìm hiểu việc tạo ra một thanh tìm kiếm và khi nhấp ch...
Tấn Huy viết 2 tháng trước
11 2
White
4 0
1. Website layouts Như chúng ta biết, bố cục của một website sẽ được chia ra thành nhiều phần, các phần chính đáng chú ý nhất là: Header: Tiêu đ...
Tấn Huy viết 2 tháng trước
4 0
White
4 0
Ở phần trước mình đã nói về các property của phần parent trong CSS Flexbox (xem lại (Link)). Hôm nay chúng ta sẽ nói tiếp phần còn lại đó là các pr...
Tấn Huy viết 22 ngày trước
4 0
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 2 tháng trước
0 2
White
19 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 2 năm trước
19 1
White
1 1
Chào mọi người, hôm nay mình viết một bài TIL nhỏ về cách lấy độ phân giải của màn hình hiện tại đang sử dụng. xdpyinfo | grep dimensions Kết quả...
namtx viết 1 năm trước
1 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
6 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!