CSS Animation: Tìm hiểu về @keyframes và các thuộc tính của CSS Animation

by Xanh Rì
Tìm hiểu về @keyframes và css animation

Hê sờ lô~ Xin chào!! Mình là Rì, là người mới nhập gia vào ngôi nhà này 👋👋

Để tiếp nối chủ đề Học CSS, thì mình sẽ chia sẻ nhiều thứ hay ho về Animation mà mình đã thu lượm được. Bài viết mở đầu của seri này sẽ là những kiến thức cơ bản về CSS @keyframes Animation. Vào luôn nhé !!
Bạn có thể xem tất cả bài viết về animation ở đây (updating…)


1. Giới thiệu về CSS @keyframes

@Keyframes là yếu tố cấu thành nên hiệu ứng trong CSS hay còn gọi là CSS Animation. Nó định nghĩa cụ thể về thuộc tính, giá trị cho hiệu ứng sẽ trông ra sao 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 “jump” và “spin”:

Ví dụ về css animation - hiệu ứng jump và spin

Đoạn code CSS của hiệu ứng ‘jump’ và ‘spin’ như sau:

CSS code @keyframes hiệu ứng jump và spin

CSS code @keyframes hiệu ứng jump và spin

CSS code animation hiệu ứng jump và spin

CSS code animation hiệu ứng jump và spin

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


2. @keyframes Rule

Mỗi @keyframes rule là một thành phần root của trang CSS giống như ‘:root’…. Khi khai báo sẽ bắt đầu với ký tự ‘@’ và từ khóa ‘keyframes’(@keyframes) và có 3 thành phần giá trị:

2.1. Cú pháp

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

2.2. Những thành phần giá trị của @keyframe

  • animation-name: là tên tùy ý mà bạn muốn đặt cho hiệu ứng. Là một giá trị bắt buộc.
  • keyframes-selector: Là những giá trị chỉ định những mốc thời gian cụ thể để điều khiển hiệu ứng sẽ hiển thị như thế nào, thể hiện bằng giá trị phần trăm (0% → 100%) hoặc từ khóa (’from’ → “to”).
  • css-styles: 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 mốc thời gian (keyframes-selector) trên.

Có 3 cách để chỉ định cụ thể thời điểm (keyframes-selector) 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 tên trùng 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 hay nhiều @keyframe giống tên nhau thì chỉ @keyframes khai báo cuối cùng được kích hoạt, những @keyframes còn lại sẽ bị bỏ qua.
  • Có thể dùng từ khóa “from” thay vì sử dụng 0%, tương tự với từ khóa “to” thay cho “100%”.
  • Khi sử dụng từ khóa “from” → “to” thì những giá trị ở giữa chúng vẫn được chỉ định bằng giá trị %.
  • Trong phần css-style: những giá trị css có “!important” sẽ bị bỏ qua.Ví dụ như đoạn code 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 “from” hay giá trị 100% hoặc ”to” không được chỉ định trong @keyframes rule thì hiệu ứng lúc bắt đầu/kết thúc của đối tượng được chọn thực hiện hiệu ứng sẽ là những thuộc tính, giá trị CSS của đối tượng đó.

3. Sử dụng @keyframes và những thuộc tính CSS Animation

Sau khi đã tạo @keyframes cho hiệu ứng, cần thêm hiệu ứng đó vào cho đối tượng mà mình muốn, thông qua thuộc tính CSS animation. Nếu không, hiệu ứng sẽ không được kích hoạt.

Thuộc tính animation 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 những thuộc tính của CSS animation.

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

  • animation-name: là tên hiệu ứng (phải khớp với tên của keyframes đã được tạo)
  • animation-duration: là tổng thời gian diễn ra hiệu ứng, đơn vị giây (s) hoặc mili giây (ms)

Ví dụ như đoạn code dưới đây:

// Animation này không được kích hoạt
.animate_not_activated{
    animation-name: spin;
}
// Animation này được kích hoạt
.animate_activated{
    animation-name: spin;
    animation-duration: 1.2s;
}

See the Pen
@keyframes
by xanh-ri (@xanh-ri)
on 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 gốm:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state
  • animation cách viết shorthand

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

Thuộc tínhMô 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 @keyframes rule.

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

Giá trị bắt buộc
animation-durationThời gian diễn ra 1 lần hiệu ứnggiây (s) hoặc mili giây (ms)
* Giá trị mặc định: 0s
* Giá trị bắt buộc
animation-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 ứngease (giá trị mặc định), ease-in, ease-out, ease-in-out, linear, step-start, step-end, steps, cubic-bezier(x1, y1, x2, y2).
animation-delayXác định thời gian trễ trước khi bắt đầu hiệu ứnggiây (s) hoặc mili giây (ms)
*Giá trị mặc định: 0s
animation-iteration-countXác định số lần lặp lai hiệu ứngSố, infinite
* Giá trị mặc định: 1
* Có thể dùng số thập phân để 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ả hainormal, reverse, alternate, alternate-reverse.
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)forwards, backwards, both, none
animation-play-stateChỉ định trạng thái hiệu ứng: đang chạy, hay dừng lạipaused, running
*Giá trị mặc định: running
animationcú pháp viết ngắn gọn các thuộc tính animationThứ tự các thuộc tính: animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

Bonus để 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 animation-timing-function được trình bày như hình và bảng mô tả chi tiết dưới đây:
    Thuộc tính css animation-timing-function

    Giá trịMô tả
    easeHiệ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.
    ease-inHiệu ứng của quá trình chuyển đổi với sự bắt đầu chậm.
    ease-outHiệu ứng của quá trình chuyển đổi với kết thúc chậm.
    ease-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 transition-timing-function.

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

  • CSS Animation shorthand: Ví dụ cách viết animation shorthand như hình dưới đây:

    animation shorthand

    Animation shorthand

3.2. Đa hiệu ứng

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

.item{
    animation-name: animation1, animation2, animation3;
    animation-duration: time1, time2, time3;
    animation-delay:  time1, time2;
    animation-iteration-count: num1, num2, num3;
}
// Hoặc
.item{
    animation: [animation1_shorthand], [animation2_shorthand], [animation3_shorthand]
}

Ví dụ:

.animate_bump1.is_run{
  animation-name: bump, reset, bg-status;
  animation-duration: 1s, 0s, 0s;
  animation-timing-function: ease-in, linear, linear;
  animation-delay: 0s, 5s, 0.9s;
  animation-fill-mode: forwards;
}
.animate_bump2.is_run{
  animation: bump 1s ease-in 0.9s forwards, 
        reset 0s linear 5s forwards,
                bg-status 0s linear 0.9s forwards;
}
.animate_chase1.is_run{
  animation: chase 2s linear 2s forwards, 
        reset 0s linear 5s forwards,
                bg-status 0s linear 2.6s forwards, 
        reset 0s linear 5s forwards;
}
.animate_chase2.is_run{
   animation: chase 2s linear 2.6s forwards, 
        reset 0s linear 5s forwards,
                bg-status 0s linear 2.6s forwards, 
        reset 0s linear 5s forwards;
}

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

See the Pen
@keyframe animate exam
by xanh-ri (@xanh-ri)
on CodePen.

 

3.3. Những thuộc tính CSS có thể tạo hiệu ứng

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

3.4. Về hiệu suất khi sử dụng animation

Hầu hết những thuộc tính CSS tạo animation đều là những thuộc tính cần quan tâm về 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 thậ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 tạo animation an toàn là:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

3.5. Các trình duyệt hỗ trợ

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

trình duyệt hỗ trợ css animation

Trình duyệt hỗ trợ css animation


4. Một mẹo để tạo hiệu ứng so le dùng biến CSS

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

Ví dụ: Đoạn code 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à số theo mức độ thời gian trễ mong muốn. Như sau:

<h3>
  <span style="--i: 0">B</span>
  <span style="--i: 1">O</span>
  <span style="--i: 2">U</span>
  <span style="--i: 3">N</span>
  <span style="--i: 4">C</span>
  <span style="--i: 5">I</span>
  <span style="--i: 6">N</span>
  <span style="--i: 7">G</span>
</h3>

Sau đó trong CSS: sẽ thực hiện lấy giá trị biến “–i” đã khai báo ở trên, tính toán thành thời gian trễ bằng hàm calc(), gán vào biến “–delay” và set cho thuộc tính animation-delayNhư sau:

span {
  --delay: calc(var(--i) * 200ms);
  animation: bounce 500ms var(--delay, 0) infinite;
}

Kết quả:

See the Pen
Bouncing letters
by Michelle Barker (@michellebarker)
on CodePen.

nguồn bài viết: ref: https://css-irl.info/quick-tip-negative-animation-delay/

👉 Cách này sử dụng rất nhiều để làm hiệu ứng load từ 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 trễ khác nhau, ví dụ:
hiệu ứng load từ từ css animation

Link: codepen


5. Những tool và thư viện hỗ trợ tạo animation miễn phí

Tools Online: Tạo keyframes & animation

Thư viện:

6. Những trang web tham khảo


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 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ần ngại hãy comment ngay dưới bài viết này nhé 💓

Bài viết liên quan

Thêm bình luận