Ảnh động trong CSS - CSS Animations

  • Thắng

    Tác giả

    Thắng

  • Ngày đăng

    14 thg 11, 2023

  • Số lượt xem

    135 lượt xem


CSS Animations là một tính năng trong CSS cho phép bạn tạo các hiệu ứng chuyển động phức tạp và linh hoạt trên các phần tử trang web.

CSS Animations - Ảnh động trong CSS

CSS cho phép thêm hiệu ứng ảnh động vào các phần tử HTML mà không cần sử dụng JavaScript.

Trong bài này này chúng ta sẽ tìm hiểu về các thuộc tính sau:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Browser Support for Animations - Trình duyệt hỗ trợ cho ảnh động 

Các chỉ số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính cho ảnh động trong CSS.

 

What are CSS Animations? - Ảnh động trong CSS là gì?

Ảnh động cho phép một phần tử dần dần thay đổi từ kiểu này sang kiểu khác.

Để sử dụng hoạt ảnh CSS, trước tiên bạn phải chỉ định một số keyframe(khung hình chính) cho hoạt ảnh.

Keyframe chứa kiểu dáng mà phần tử sẽ có tại một số thời điểm nhất định.

 

The @keyframes Rule - Quy tắc của @keyframe

Khi bạn chỉ định kiểu CSS bên trong quy tắc @keyframes, hình ảnh sẽ dần thay đổi từ kiểu hiện tại sang kiểu mới vào những thời điểm nhất định.

Để hiệu ứng ảnh động hoạt động, bạn phải liên kết hoạt ảnh đó với một phần tử.

Ví dụ sau liên kết hoạt ảnh "example" với phần tử <div>. Hoạt ảnh sẽ kéo dài trong 4 giây và nó sẽ dần thay đổi màu nền của phần tử <div> từ "đỏ" sang "vàng":

<!DOCTYPE html>  <html>  <head>  <style> 
div {
  width: 100px;
  height: 100px;  
 background-color: red;
  animation-duration: 4s;
  animation-name: example;
}
@keyframes example {    from {background-color: red;}    to {background-color: yellow;}  }
</style>  </head>  <body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>  
</body>  </html>  

 

Khi bắt đầu box thẻ div của chúng ta sẽ có màu đỏ và chuyển dần sang màu vàng

 

Lưu ý: Thuộc tính animation-duration xác định thời gian hoàn thành một hoạt ảnh. Nếu thuộc tính thời lượng hoạt ảnh không được chỉ định thì sẽ không có hiệu ứng ảnh động nào xảy ra vì giá trị mặc định là 0s (0 giây).

 

Delay an Animation - Độ trễ của ảnh động

Thuộc tính animation-delay chỉ định độ trễ khi bắt đầu hiệu ứng ảnh động. 

Ví dụ sau có độ trễ 2 giây trước khi bắt đầu hiệu ứng ảnh động:

div {
   width: 100px;     height: 100px;
  position: relative;
 background-color: red;
 animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

 

Set How Many Times an Animation Should Run - Đặt số lần ảnh động sẽ chạy

Thuộc tính animation-iteration-count chỉ định số lần ảnh động sẽ chạy.

Ví dụ sau sẽ chạy hoạt ảnh 3 lần trước khi dừng:

div {
  width: 100px;    height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

 

Ví dụ sau sử dụng giá trị "infinite" để làm cho ảnh động lập đi lập lại liên tục mà không dừng lại:

div {
  width: 100px;    height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

 

Specify the Speed Curve of the Animation - Chỉ định tốc độ nhanh hay chậm của ảnh động

Thuộc tính animation-timing-function chỉ địn tốc độ của ảnh động.

Thuộc tính animation-timing-function có thể có các giá trị sau:

  • ease - chỉ định hiệu ứng chuyển tiếp với khởi đầu chậm, sau đó nhanh, rồi kết thúc chậm (đây là mặc định)
  • linear - chỉ định hiệu ứng chuyển tiếp với cùng tốc độ từ đầu đến cuối
  • ease-in - chỉ định hiệu ứng chuyển tiếp với khởi đầu chậm
  • ease-out - chỉ định hiệu ứng chuyển tiếp với kết thúc chậm
  • ease-in-out - chỉ định hiệu ứng chuyển tiếp với phần bắt đầu và kết thúc chậm
  • cubic-bezier(n,n,n,n) -cho phép bạn xác định các giá trị của riêng mình trong hàm cubic-bezier()

Ví dụ sau đây cho thấy một số đường cong tốc độ khác nhau có thể được sử dụng:

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}  
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

 

CSS Animation Properties - Các thuộc tính ảnh động trong CSS

 

Bảng sau liệt kê quy tắc @keyframes và tất cả các thuộc tính hoạt ảnh CSS:

Property(Thuộc tính) Description(Mô tả)
@keyframes Chứa code của các hiệu ứng ảnh động
animation Thuộc tính này dùng để để đặt tốc độ cho tất cả thuộc tính ảnh động
animation-delay Chỉ định độ trễ khi bắt đầu hiệu ứng ảnh động
animation-direction Chỉ định xem một hoạt ảnh sẽ được phát tiến, lùi hay theo chu kỳ thay thế
animation-duration Chỉ định thời gian hoạt ảnh sẽ hoàn thành một chu kỳ
animation-fill-mode Chỉ định kiểu cho phần tử khi hoạt ảnh không phát (trước khi hoạt ảnh bắt đầu, sau khi hoạt ảnh kết thúc hoặc cả hai)
animation-iteration-count Chỉ định số lần ảnh động sẽ được phát
animation-name Chỉ định tên của hoạt ảnh @keyframes
animation-play-state Chỉ định xem hoạt ảnh đang chạy hay bị tạm dừng
animation-timing-function Chỉ định đường cong tốc độ nhanh hay chậm của hoạt ảnh

 


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.