Sự thật về Transition Css Là Gì – Tập Tành Tìm Hiểu Css Animation

Thử VD này bạn sẽ thấy quá trình chuyển đổi màu quá nhanh, tạo cảm giác giống button tắt/bật (on/off) ấy. Vậy thì để có thể điều khiển được mọi thứ bên trong quá trình chuyển đổi, chúng ta sẽ cần thêm vài thuộc tính điều khiển quá trình (transition) này. 2 thuộc tính cơ bản nhất để visualize quá trình chuyển đổi cho bạn có thể nhìn thấy đó là transition-duration và transition-property

Thời gian diễn ra chuyển đổi: transition-duration: Đây là thuộc tính giúp bạn quyết định độ dài của quá trình chuyển đổi – chính là thời gian để thuộc tính đi từ trạng thái ban đầu tới trạng thái cuối cùng mong muốn. Bạn có thể chọn đơn vị seconds s hoặc milliseconds ms cho thuộc tính transition-duration Lựa chọn thuộc tính sẽ thực hiện chuyển đổi: transition-property. Giả sử trong quá trình hover trên kia, bạn muốn background-color không bị can thiệp quá trình chuyển đổi, và chỉ can thiệp kéo dài 2s cho việc chuyển màu chữ chẳng hạn.

Bạn đang xem: Transition css là gì

Xem thêm: Mic Là Gì

Khi đó hãy chọn trực tiếp thuộc tính chuyển đổi và thời gian chuyển đổi: (xem code pen tại đây)

Giờ nhờ có việc lựa chọn thuộc tính transition-property và thời gian chuyển trạng thái transition-duration mà trông button của chúng ta đã chuyển trạng thái mượt mà và ưa nhìn hơn lúc đầu rồi

Transition options

transition-timing-function Nghe qua nhiều người sẽ liên tưởng đến transition-duration ở trên phải không? Để dễ hình dung, thì Ví dụ bạn có 1 button chuyển màu như button 2 phía trên, nhưng bạn muốn nó không chỉ đơn giản đổi màu từ từ trong 2s như vậy, mà muốn nó ban đầu chuyển màu chậm chậm, sau đó chuyển màu trở nên nhanh hơn chẳng hạn?. transition-timing-function giúp cho bạn điều khiển được các giai đoạn chuyển đổi trạng thái cho Element của bạn nhé, còn transition-duration chỉ quyết định tổng thời gian diễn ra hết chuyển đổi mà thôi. Có 5 giá trị cho transition-timing-function:

ease: thay đổi bắt đầu chậm, sau đó tăng dần vận tốc, rồi chậm lại và dừng linear: vận tốc không thay đổi trong cả quá trình đổi trạng thái ease-in: Vận tốc tăng chậm từ 0, tăng dần đến khi cán đích (tất nhiên hết giờ là đột ngột dừng luôn :v) ease-out: Vận tốc lúc đầu lớn, sau đó chậm lại trước khi cán đích (ngược lại với ease-in) ease-in-out: Bắt đầu chuyển động chậm rãi, rồi tăng tốc ở giai đoạn giữa, sau đó lại chậm lại (không khác ease là mấy nhỉ

)

Dưới đây có 1 ví dụ để mọi người thấy dễ hơn (đừng quá chú ý code đoạn transform, bài sau mình sẽ giải thích)

Xem thêm: Individual Là Gì – Nghĩa Của Từ : Individual

transition-delay: Đây là thuộc tính quyết định độ trễ của hành động – tức là khi bạn chọn: bắt đầu, nó sẽ dừng vài giây, rồi mới bắt đầu chuyển động. Có 2 loại giá trị như transition-duration: seconds s và milliseconds ms

Giờ bạn thử thêm transition-delay vào ví dụ đầu tiên xem nhé

Những cách khác nhau để viết thuộc tính transition

Ở ví dụ đầu tiên với Button 2, chúng ta đã áp dụng transition-property lên thuộc tính color của button 2 này:

#button-2

Kết quả là màu chữ được thay đổi “smoothly” trong 2s khi hover, còn background-color thì thoắt chuyển màu, ko được “smooth” cho lắm. Tuy nhiên nhỡ chúng ta muốn transition với nhiều thuộc tính, ví dụ như muốn cả màu chữ và màu nên cùng chuyển đổi “smoothly” thì sao? Câu trả lời là sẽ liệt kế các thuộc tính thôi

: #button-2

Thử tự thực hành nhé

Với các thuộc tính đã được liệt kê trong transition-propery, đừng quên xác định trạng thái sau khi thay đổi nhé (ví dụ đổi màu khi hover chẳng hạn). Nếu bạn có rất nhiều thuộc tính cần thay đổi, mà liệt kê hết vào transition thì lâu, khi đó có thể sử dụng: transition-property: all; transition-duration: 2s;

Ngoài ra bạn có thể rút gọn còn 1 dòng như sau:

//transition: transition: background-color 3s ease-in-out 1s, color 2s ease 4s;

Như trên thì danh sách các transition-property với các duration, option, delay riêng đều được viết trên 1 dòng, và các propery này cách nhau bởi dấu ,

Những thuộc tính nào có thể được transition?

Không phải tất cả các thuộc tính CSS đều có thể transition được, bởi sự thay đổi trạng thái của 1 số thuộc tính không thể thay đổi “dần dần” được, mà chỉ thay đổi trạng thái từ 1 tới 2 theo cách “ngay lập tức”. “Transition” như đã nói từ đầu, là để can thiệp vào quá trình thay đổi trạng thái, vì vậy, cần phải nhìn thấy quá trình đó (tăng thời gian nhìn thấy được bằng duration) thì mới có thể can thiệp vào quá trình này. Ví dụ như background-image không thể sử dụng transition được, bới vì 2 hình ảnh không thể chuyển dần qua nhau (trừ khi bạn can thiệp xử lý hình ảnh video, nhưng cái đấy lại cao siêu không thuộc về css nữa rồi

) Ngoài ra thì có 1 số thuộc tính khác không sử dụng được transition như: border style, position, float, background-repeat, font family,… Ngược lại, để biết những thuộc tính có thể sử dụng transition để animate, thì ví dụ như là những thuộc tính có thể hiển bằng các con số, bởi vì khi đó trình duyệt có thể tính toán các giá trị cho các thời điểm trong quá trình chuyển đổi: height, border width, padding, margin, line-height, opacity,… Ngoài ra thì cũng có thể animate được những thuộc tính thể hiện bằng màu sắc: như là color, background-color.

Nếu lười suy luận, bạn có thể xem danh sách các thuộc tính có thể transition tại đây nhé

Kết

Qua bài đầu tiên mình đã giới thiệu về thuộc tính phục vụ animate đầu tiên là position rồi, bài tiếp theo sẽ là về Transform 2D và 3D nhé. Hãy chờ mình tháng sau

Chuyên mục: Hỏi Đáp