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];<

Phần thưởng để dễ hình dung hơn về một số thuộc tính CSS Animation trên

• animation-timing-function Hiệu ứng được diễn ra tương ứng với các giá trị của

  // 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 trình bày như hình và bảng mô tả chi tiết dưới đây.
  
  
  Giá trịMô tảHiệu ứng của quá trình chuyển đổi với sự bắt đầu chậm. Sau đó nhanh chóng, rồi kết thúc chậm. easy-inHiệu ứng của quá trình chuyển đổi với sự bắt đầu chậm. easy-outHiệu ứng của quá trình chuyển đổi với kết thúc chậm. easy-in-outHiệu ứng của quá trình chuyển đổi với sự bắt đầu và kết thúc chậm. linearHiệu ứng của quá trình chuyển đổi với cùng một tốc độ từ đầu đến cuối. Tương đương với khi không sử dụng thuộc tính

  // 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]
      }
  }
  

  9.

  Nếu muốn có các chức năng thời gian phức tạp hơn, bạn có thể tự tạo khối-bezier xem tại đây hoặc sử dụng công cụ tùy chỉnh trực tiếp

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

  0

• CSS Animation viết tắt. Ví dụ cách viết tốc ký hoạt ảnh như hình dưới đây
  

  tốc ký hoạt hình

3. 2. App effect

Để thêm cùng lúc nhiều hiệu ứng đã được định nghĩa là khung hình chính, với các thuộc tính khác nhau, thì chỉ cần ngăn cách định nghĩa của mỗi hiệu ứng bởi dấu phẩy như sau

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

7

Ví dụ

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

8

*Nếu không khai báo đầy đủ các thuộc tính khác tương ứng với tên hoạt hình thì nó sẽ lấy giá trị theo giá trị ban đầu

Xem bài kiểm tra Pen
@keyframe animate của xanh-ri (@xanh-ri)
trên CodePen.

 

3. 3. Các thuộc tính CSS có thể tạo hiệu ứng

MDN (mozilla. org) đã có một danh sách các thuộc tính CSS có thể thay đổi giá trị để tạo hiệu ứng. Những thay đổi giá trị tạo hiệu ứng thông thường là giá trị màu và số. Một ví dụ thuộc tính không thể thay đổi để tạo hiệu ứng là

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

1

3. 4. Về hiệu suất khi sử dụng hoạt ảnh

Hầu hết các thuộc tính CSS tạo hoạt hình đều là những thuộc tính cần quan tâm đến hiệu suất (theo bài viết Theo bài viết về Animations & perfomence), vì vậy nên xem xét cẩn trọng trước khi chọn thuộc tính cho hiệu ứng. Tuy nhiên, có một số thuộc tính có thể sử dụng toàn bộ việc tạo hoạt hình

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

  2

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

  3

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

  4

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

  5

3. 5. Hỗ trợ các trình duyệt

Gần giống như tất cả các phiên bản mới của các trình duyệt phổ biến đều hỗ trợ CSS @keyframe và CSS animation. Các bạn có thể tham khảo thông tin chi tiết về hình ảnh lấy từ Caniuse dưới đây

css animation browser support

---

4. Một mẹo để tạo hiệu ứng để sử dụng biến CSS

Một mẹo nhỏ để tạo hiệu ứng giữa các đối tượng là sử dụng biến trong CSS

Ví dụ. Đoạn mã HTML, CSS dưới đây. Chúng ta sẽ thêm style-inline vào thẻ HTML, và đặt giá trị biến “–i” là một số lượng theo thời lượng mong muốn. như sau

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

4

Sau đó trong CSS. sẽ thực hiện lấy giá trị của biến “–i” đã khai báo ở trên, tính toán thành thời gian hiển thị bằng hàm calc(), gán vào biến “–delay” và đặt thuộc tính

// 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]
    }
}

2Như sau

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

0

Kết quả

Xem Bút
Những bức thư nảy của Michelle Barker (@michellebarker)
trên CodePen.

source bài viết. giới thiệu. https. //css-irl. thông tin/mẹo nhanh-tiêu cực-hoạt ảnh-chậm trễ/

👉 Cách này sử dụng rất nhiều để tạo hiệu ứng tải từ các phần tử. từ trái sang phải, từ nhiều hướng khác nhau với thời gian khác nhau, ví dụ

liên kết. viết mã

---

5. Những công cụ và thư viện hỗ trợ tạo hoạt hình miễn phí

Công cụ trực tuyến. Tạo khung hình chính và hoạt ảnh

• Trình tạo CSS hoạt hình
• Bộ hoạt hình CSS

Thư viện

• Thư viện hoạt hình CSS
• 12 Thư viện CSS Animation tốt nhất (đăng trên 2022. 07. 24)

6. Những trang web tham khảo

• • Sử dụng CSS Animation (MDN)
  • @keyframes (MDN)
  • Thuộc tính CSS có thể hoạt ảnh (MDN)
  • Hoạt hình CSS Cấp 1 (W3C)
  • hỗ trợ trình duyệt. Hoạt hình CSS (Caniuse)

---

Trên đây là những kiến ​​thức cơ bản về CSS @keyframes animation, hy vọng đây là bài tổng hợp có thể giúp các bạn bất kỳ phần nào trong quá trình học tập và làm việc  ʕ•́ᴥ•̀ʔっ♡

Nếu có bất kỳ câu hỏi hay thắc mắc gì về nội dung trên, đừng ngại hãy comment ngay dưới bài viết này nhé 💓