Tạo CSS khung hình chính

// Cách 1: Dùng từ khóa 'from', 'to'
@keyframes animation-name {
    from{
      [css styles]
    }
    to{
      [css styles]
    }
}

1 is a component component should be effect in CSS or also call is CSS Animation. Nó định nghĩa cụ thể về thuộc tính, giá trị cho hiệu ứng sẽ hiển thị tại mỗi thời điểm trong dải thời gian của hiệu ứng

Ví dụ hiệu ứng CSS “nhảy” và “quay”

Đoạn mã CSS của hiệu ứng 'nhảy' và 'quay' như sau

Mã CSS @keyframes hiệu ứng nhảy và quay

Mã CSS hoạt hình hiệu ứng nhảy và quay

Vì vậy để tạo hiệu ứng bằng CSS Animation, ta phải định nghĩa CSS @Keyframes, rồi mới gán các khung hình chính đó vào trong CSS Animation cho các đối tượng

2. @keyframes Quy tắc

Mỗi quy tắc

// Cách 1: Dùng từ khóa 'from', 'to'
@keyframes animation-name {
    from{
      [css styles]
    }
    to{
      [css styles]
    }
}

2 là một thành phần gốc của trang CSS giống như ‘. nguồn gốc'…. Khi khai báo sẽ bắt đầu với ký tự ‘@’ và từ khóa ‘keyframes’[

// Cách 1: Dùng từ khóa 'from', 'to'
@keyframes animation-name {
    from{
      [css styles]
    }
    to{
      [css styles]
    }
}

2] và có 3 thành phần giá trị

2. 1. cú pháp

@keyframes [animation-name] {keyframes-selector {[css-styles]}}

2. 2. Các thành phần giá trị của @keyframe

• tên hoạt hình. is the option name that you want to set for application. Là một giá trị bắt buộc
• bộ chọn khung hình chính. Là những giá trị chỉ định những khoảng thời gian cụ thể để điều khiển hiệu ứng màn hình sẽ hiển thị như thế nào, có thể hiển thị bằng giá trị phần trăm [0% → 100%] hoặc từ khóa ['từ' → "đến"]
• kiểu css. Là những thuộc tính, giá trị CSS được định nghĩa cho hiệu ứng tương ứng với các khoảng thời gian [

  // Cách 1: Dùng từ khóa 'from', 'to'
  @keyframes animation-name {
      from{
        [css styles]
      }
      to{
        [css styles]
      }
  }
  

  4] trên

Có 3 cách để chỉ định cụ thể thời điểm [bộ chọn khung hình chính] cho hiệu ứng như sau

// Cách 1: Dùng từ khóa 'from', 'to'
@keyframes animation-name {
    from{
      [css styles]
    }
    to{
      [css styles]
    }
}

// Cách 2: Dùng phần trăm ['%']
@keyframes animation-name {
    0%{
         [css styles]
    }
    10%{
         [css styles]
    }
    40%{
         [css styles]
    }
    60%{
         [css styles]
    }
    100%{
         [css styles]
    }
}

// Cách 3: Dùng 'from', 'to' và '%' 
@keyframes animation-name {
    from{
         [css styles]
    }
    10%{
         [css styles]
    }
    50%{
         [css styles]
    }
    to{
         [css styles]
    }
}

Một số chú ý quan trọng trong khi khai báo một @keyframes

• Tên hợp lệ được bắt đầu là một chữ cái, dấu gạch dưới [’_’], dấu gạch ngang[’-’]. Có phân biệt chữ hoa chữ thường, và không đặt trùng tên với những từ khóa đặc biệt trong css như “none, initial, inherit, unset”.
  Ví dụ những tên hợp lệ và những tên không hợp lệ như dưới đây.

  // Ví dụ những tên hợp lệ
  @keyframes jump-rotate{}
  @keyframes _jump_rotate{}
  @keyframes -jump-rotate{}
  @keyframes JumpRotate1{}
  
  // Ví dụ những tên không hợp lệ
  @keyframes 12jump-rotate{}
  @keyframes --jumpRotate{}
  @keyframes .jump{}
  @keyframes none{}
  @keyframes initial{}

• Nếu có 2 hoặc nhiều @keyframe giống tên nhau thì chỉ @keyframes khai báo cuối cùng mới được kích hoạt, những @keyframes còn lại sẽ bị bỏ qua

• Có thể dùng từ khóa “từ” thay vì sử dụng 0%, tương tự với từ khóa “đến” thay cho “100%”
• Khi sử dụng từ khóa “từ” → “đến” thì những giá trị ở giữa chúng vẫn chỉ được định giá bằng giá trị %
• Trong phần css-style. những giá trị css có “. quan trọng” sẽ bị bỏ qua. Ví dụ như đoạn mã dưới đây.

  // Use from, to, %, !important
  @keyframes bump{
      from{
          transform: translateX[0] rotate[0];
      }
      90%{
          transform: translateX[170px] rotate[360deg];
      }
      to{
          transform: translateX[160px] rotate[360deg];
          background-color: red !important; // Thuộc tính này sẽ bị bỏ qua
      }
  }
  

• Nếu giá trị 0% hoặc “từ” hoặc giá trị 100% hoặc “đến” không được chỉ định trong quy tắc @keyframes thì hiệu ứng khi bắt đầu/kết thúc của đối tượng được chọn sẽ thực hiện hiệu ứng sẽ là thuộc tính,

3. Use @keyframes and CSS Animation CSS

Sau khi đã tạo @keyframes cho hiệu ứng, cần thêm hiệu ứng đó vào đối tượng mà mình muốn, thông qua thuộc tính CSS

// Cách 1: Dùng từ khóa 'from', 'to'
@keyframes animation-name {
    from{
      [css styles]
    }
    to{
      [css styles]
    }
}

5. Nếu không, ứng dụng sẽ không được kích hoạt

Thuộc tính

// Cách 1: Dùng từ khóa 'from', 'to'
@keyframes animation-name {
    from{
      [css styles]
    }
    to{
      [css styles]
    }
}

5 có 2 nhiệm vụ

• Gán hiệu ứng được định nghĩa ở @keyframes cho đối tượng muốn thực hiện hiệu ứng
• Định nghĩa cách diễn ra hiệu ứng bằng các thuộc tính của hoạt ảnh CSS

Để Animation hoạt động thì cần phải có ít nhất 2 thuộc tính CSS Animation

• // Cách 1: Dùng từ khóa 'from', 'to'
  @keyframes animation-name {
      from{
        [css styles]
      }
      to{
        [css styles]
      }
  }
  

  7. là tên hiệu ứng [phải khớp với tên của khung hình chính đã được tạo]

• // Cách 1: Dùng từ khóa 'from', 'to'
  @keyframes animation-name {
      from{
        [css styles]
      }
      to{
        [css styles]
      }
  }
  

  8. is the general time diễn ra hiệu ứng, đơn vị giây [s] or mili giây [ms]

Ví dụ như đoạn mã dưới đây

// Cách 1: Dùng từ khóa 'from', 'to'
@keyframes animation-name {
    from{
      [css styles]
    }
    to{
      [css styles]
    }
}

4

Xem Bút
@keyframes của xanh-ri [@xanh-ri]
trên CodePen.

3. 1. Các thuộc tính và giá trị của Animation

Các thuộc tính của CSS Animation bao trang trí

• // Cách 1: Dùng từ khóa 'from', 'to'
  @keyframes animation-name {
      from{
        [css styles]
      }
      to{
        [css styles]
      }
  }
  

  7

• // Cách 1: Dùng từ khóa 'from', 'to'
  @keyframes animation-name {
      from{
        [css styles]
      }
      to{
        [css styles]
      }
  }
  

  8

• // Cách 2: Dùng phần trăm ['%']
  @keyframes animation-name {
      0%{
           [css styles]
      }
      10%{
           [css styles]
      }
      40%{
           [css styles]
      }
      60%{
           [css styles]
      }
      100%{
           [css styles]
      }
  }
  

  1

• // Cách 2: Dùng phần trăm ['%']
  @keyframes animation-name {
      0%{
           [css styles]
      }
      10%{
           [css styles]
      }
      40%{
           [css styles]
      }
      60%{
           [css styles]
      }
      100%{
           [css styles]
      }
  }
  

  2

• // Cách 2: Dùng phần trăm ['%']
  @keyframes animation-name {
      0%{
           [css styles]
      }
      10%{
           [css styles]
      }
      40%{
           [css styles]
      }
      60%{
           [css styles]
      }
      100%{
           [css styles]
      }
  }
  

  3

• // Cách 2: Dùng phần trăm ['%']
  @keyframes animation-name {
      0%{
           [css styles]
      }
      10%{
           [css styles]
      }
      40%{
           [css styles]
      }
      60%{
           [css styles]
      }
      100%{
           [css styles]
      }
  }
  

  4

• // Cách 2: Dùng phần trăm ['%']
  @keyframes animation-name {
      0%{
           [css styles]
      }
      10%{
           [css styles]
      }
      40%{
           [css styles]
      }
      60%{
           [css styles]
      }
      100%{
           [css styles]
      }
  }
  

  5

• // Cách 2: Dùng phần trăm ['%']
  @keyframes animation-name {
      0%{
           [css styles]
      }
      10%{
           [css styles]
      }
      40%{
           [css styles]
      }
      60%{
           [css styles]
      }
      100%{
           [css styles]
      }
  }
  

  6

• // Cách 1: Dùng từ khóa 'from', 'to'
  @keyframes animation-name {
      from{
        [css styles]
      }
      to{
        [css styles]
      }
  }
  

  5 cách viết tốc ký

Chi tiết về các thuộc tính và giá trị như sau

Thuộc tính Mô tảGiá trịanimation-nameLà tên của hiệu ứng sẽ áp dụng cho phần tử, được xác định bởi 'keyframe-name' đã được định nghĩa trong quy tắc @keyframes

Nếu 'animation-name' không được khai báo với bất kỳ 'keyframe-name' nào, thì sẽ không có hiệu ứng được kích hoạt

Giá trị bắt buộc hoạt hình-durationThời gian diễn ra 1 lần hiệu ứng giây [s] hoặc mili giây [ms]
* Giá trị mặc định. 0s
* Giá trị bắt buộcanimation-timing-functionXác định cách diễn ra hiệu ứng. đường cong tốc độ [đồ thị tốc độ chuyển động] hoặc tốc độ của hiệu ứng [giá trị mặc định], vào, ra, vào, tuyến tính, bắt đầu từng bước, kết thúc bước, các bước . animation-delayXác định thời gian trước khi bắt đầu hiệu ứng giây [s] hoặc mili giây [ms]
*Giá trị mặc định. 0sanimation-iteration-countXác định số lần lặp lại hiệu ứngSố, vô hạn
* Giá trị mặc định. 1
* Có thể sử dụng thập phân số để hiệu ứng sẽ diễn ra 1 phần [vd. 1. 4]animation-directionXác định hướng của hiệu ứng. chạy xuôi hay ngược hành động, hay cả hai, đảo ngược, luân phiên, luân phiên-đảo ngược. animation-fill-modeXác định kiểu CSS cho phân tử khi nó không chạy hiệu ứng [trước khi bắt đầu hiệu ứng, sau khi kết thúc hiệu ứng hoặc cả 2]tiến, lùi, cả hai, nonanimation-play-stateChỉ định trạng thái . đang chạy, hay dừng lại, đang chạy
*Giá trị mặc định. running animation syntax short rút gọn các thuộc tính animation Thứ tự các thuộc tính. hoạt hình. [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];