Chuyển tiếp

4.1 Thuộc tính transition

CSS transition cho phép animate thay đổi giá trị của các thuộc tính CSS, tạo ra các chuyển đổi mượt mà giữa trạng thái ban đầu và cuối cùng của chúng. Đây là một công cụ mạnh mẽ, cải thiện sự tiện lợi khi sử dụng, thêm sự động đậy cho các trang web. Hãy cùng tìm hiểu các khía cạnh chính của transition, bao gồm các thuộc tính, thời lượng và chức năng thời gian.

Thuộc tính transition kết hợp tất cả các khía cạnh của transition vào một thuộc tính. Nó có thể bao gồm:

1. Các thuộc tính sẽ được animate.
2. Thời lượng của animation.
3. Chức năng thời gian.
4. Độ trễ trước khi animation bắt đầu (không bắt buộc).

Cú pháp:

    
      element {
        transition: property duration timing-function delay;
      }
    
  

Nơi:

• property: thuộc tính mà transition được áp dụng (ví dụ: width, height, background-color)
• duration: thời lượng của transition (ví dụ: 2s cho hai giây hoặc 500ms cho 500 mili giây)
• timing-function: chức năng thời gian xác định tốc độ thay đổi của animation (ví dụ: ease, linear, ease-in, ease-out, ease-in-out)
• delay: độ trễ trước khi transition bắt đầu (ví dụ: 1s cho một giây)

Ví dụ:

    
      
       
   
       
   
       
   

     Content 
   
    
  

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s ease-in-out, background-color 1s ease;
      }
    
  

Giải thích mã:

• transition: width 2s ease-in-out, background-color 1s ease: xác định hai transition: một cho thuộc tính width với thời lượng 2 giây và chức năng thời gian ease-in-out, và một cho thuộc tính background-color với thời lượng 1 giây và chức năng thời gian ease

4.2 Thuộc tính của transition

1. Thuộc tính transition-property

Thuộc tính transition-property xác định các thuộc tính của phần tử sẽ áp dụng transition.

Cú pháp:

    
      element {
        transition-property: property1, property2 ...;
      }
    
  

Ví dụ:

    
      .box {
        transition-property: width, height, background-color;
      }
    
  

2. Thuộc tính transition-duration

Thuộc tính transition-duration đặt thời lượng của transition.

Cú pháp:

    
      element {
        transition-duration: time;
      }
    
  

Ví dụ:

    
      .box {
        transition-duration: 2s, 1s, 3s;
      }
    
  

3. Thuộc tính transition-timing-function

Thuộc tính transition-timing-function xác định tốc độ thay đổi animation qua thời gian.

Cú pháp:

    
      element {
        transition-timing-function: function;
      }
    
  

Ví dụ:

    
      .box {
        transition-timing-function: ease-in, linear, ease-out;
      }
    
  

4. Thuộc tính transition-delay

Thuộc tính transition-delay đặt độ trễ trước khi transition bắt đầu.

Cú pháp:

    
      element {
        transition-delay: time;
      }
    
  

Ví dụ:

    
      .box {
        transition-delay: 1s, 0s, 500ms;
      }
    
  

4.3 Thời lượng của transition

Thời lượng transition xác định bao lâu animation của thay đổi thuộc tính sẽ kéo dài. Nó được đặt bằng giây (s) hoặc mili giây (ms).

Ví dụ:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s, height 1s, background-color 500ms;
      }
    
  

Giải thích mã:

• transition: width 2s, height 1s, background-color 500ms: xác định rằng transition cho thuộc tính width sẽ kéo dài 2 giây, cho height — 1 giây, và cho background-color — 500 mili giây.

4.4 Chức năng thời gian

Chức năng thời gian xác định cách giá trị thuộc tính thay đổi qua thời gian. Chúng cho phép tạo ra các hiệu ứng animation khác nhau.

Các chức năng thời gian chính:

• ease: animation bắt đầu chậm, tăng tốc giữa chừng và chậm lại khi kết thúc
• linear: animation diễn ra với tốc độ không đổi từ đầu đến cuối
• ease-in: animation bắt đầu chậm và sau đó tăng tốc
• ease-out: animation bắt đầu nhanh và sau đó chậm lại
• ease-in-out: animation bắt đầu và kết thúc chậm, tăng tốc giữa chừng

Ví dụ:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
      }
    
  

Giải thích mã:

• ease-in-out: chuyển tiếp mượt mà, bắt đầu và kết thúc chậm
• linear: chuyển tiếp với tốc độ không đổi
• ease: chuyển tiếp với khởi đầu và kết thúc chậm, tăng tốc giữa chừng