Thuộc tính animation

7.1 Thuộc tính animation-name

CSS-animation cho phép tạo ra các hiệu ứng hình ảnh động và mượt mà, cải thiện giao diện người dùng và làm cho nó tương tác hơn. Các thuộc tính animation cho phép bạn kiểm soát các khía cạnh khác nhau của animation, như tên, thời lượng, chức năng timing và độ trễ. Bây giờ chúng ta sẽ xem xét chi tiết các thuộc tính này và cho thấy cách sử dụng chúng.

Thuộc tính animation-name xác định tên animation sẽ được áp dụng cho phần tử. Tên này phải khớp với tên được xác định trong quy tắc @keyframes.

Cú pháp:

    
      element {
        animation-name: animation-name;
      }
    
  

Nơi:

• animation-name: tên animation, được xác định trong @keyframes

Ví dụ:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
      }
    
  

Giải thích mã:

• @keyframes moveRight: xác định animation với tên moveRight, chuyển phần tử sang phải
• .box: phần tử với animation moveRight được áp dụng

7.2 Thuộc tính animation-duration

Thuộc tính animation-duration xác định thời lượng của animation. Giá trị được chỉ định trong giây (s) hoặc mili giây (ms).

Cú pháp:

    
      element {
        animation-duration: time;
      }
    
  

Nơi:

• time: thời lượng của animation (ví dụ: 2s cho hai giây hoặc 500ms cho 500 mili giây).

Ví dụ:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
      }
    
  

Giải thích mã:

• animation-duration: 2s: đặt thời lượng cho animation moveRight là 2 giây

7.3 Thuộc tính animation-timing-function

Thuộc tính animation-timing-function xác định tốc độ thay đổi animation theo thời gian. Nó cho phép tạo ra các hiệu ứng animation khác nhau, như tăng tốc, giảm tốc, v.v.

Cú pháp:

    
      element {
        animation-timing-function: function;
      }
    
  

Nơi:

• function: chức năng timing, xác định tốc độ thay đổi animation (ví dụ: ease, linear, ease-in, ease-out, ease-in-out)

Ví dụ:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

Giải thích mã:

• animation-timing-function: ease-in-out: đặt chức năng timing cho animation moveRight, tạo animation mượt mà với sự bắt đầu và kết thúc chậm, và tăng tốc ở giữa

Các chức năng timing chính:

• ease: animation bắt đầu chậm, tăng tốc đến giữa và giảm tốc đến cuối
• 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 đó giảm tốc
• ease-in-out: animation bắt đầu và kết thúc chậm, tăng tốc ở giữa

7.4 Thuộc tính animation-delay

Thuộc tính animation-delay xác định sự chậm trễ trước khi animation bắt đầu. Giá trị được chỉ định trong giây (s) hoặc mili giây (ms).

Cú pháp:

    
      element {
        animation-delay: time;
      }
    
  

Nơi:

• time: sự chậm trễ trước khi animation bắt đầu (ví dụ: 1s cho một giây hoặc 500ms cho 500 mili giây)

Ví dụ:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

Giải thích mã:

• animation-delay: 1s: đặt sự chậm trễ trước khi animation moveRight bắt đầu là 1 giây