CSS Transition

Summary

• transition-property, duration, timing-function, delay
• Chỉ những property có middle state mới có thể apply transition.
• Không nên apply transition for all property, vì có thể ảnh hưởng tới performance.

Transition

• Thay đổi trạng thái init và trạng thái target của 1 phần tử.

• transition-property

  • Xác định property nào sẽ được transition, có thể accept nhiều properties 1 lúc.
  • Các properties xác định sẽ transitions mượt hơn, từ từ thay đổi theo transation-duration, còn những properties không được chỉ định, sẽ thay đổi ngay lập tức.

• transition-duration

  • Khoảng thời gian mà 1 transition will take to complete.

• transition-timing-function

  • Hiệu ứng thay đổi
    • linear: Speed thay đổi là constant, từ khi bắt đầu đến kết thúc.
    • ease: Ban đầu thay đổi chậm, sau đó tăng tốc ở giữa, rồi đi chậm lại tới khi kết thúc transition.
    • ease-in: Transition bắt đầu chậm, rồi tăng tốc đến khi kết thúc
    • ease-out: Transition bắt đầu nhanh, rồi chậm dần đến khi kết thúc
    • ease-in-out: Bắt đầu chậm, tăng tốc ở giữa, và slow đến khi kết thúc.
    • steps() : Bước nhảy. tham số là số lần nhảy
    • cubic-bezier()

• transition-delay

  • Thời gian delay trước khi bắt đầu transition

• Shorthand: transition: transform 300ms ease-in-out 0s;

Các thuộc tính khá giống với animation

What can and can not

Thứ gì có “middle-state” thì có thể áp dụng “transition”. Vi dụ font-size. Nhưng những thứ không có middle state như font-family thì không áp dụng được, vì mình sẽ không biết middle state là gì.

• transform
• color
• shadow
• filter

Triggers

• :hover, :focus, :focus-within, :target, :active