Chuyển đổi hoạt hình css codepen

Trong bài viết này, mình muốn cung cấp những phần quan trọng nhất để bạn có thể tạo hiệu ứng thú vị với CSS Animation

Design design with CSS Animation

Mình cũng làm một ví dụ nhỏ ở cuối bài viết này để các bạn có thể tham khảo

lục mục

1. Các thuộc tính Animation

2. Tìm hiểu về Keyframes

3. Tạo CSS Animation

4. Ví dụ CSS Animation thực tế

1. Các thuộc tính Animation

Việc thiết lập hoạt ảnh được thực hiện bằng cách gán thuộc tính hoạt ảnh trong khi viết css cho phần tử hoặc thuộc tính phụ của nó

Để bắt đầu tạo ra các hiệu ứng chuyển động thú vị với CSS Animation, bạn phải biết cách thiết lập thời lượng (thời lượng), thời gian (thời gian), tốc độ (độ trễ) và một số thứ khác

Để làm quen với các thuộc tính này và hiểu chúng có thể làm được gì, hãy cùng xem chi tiết bên dưới đây

Thuộc tính #1.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Ví dụ. Chúng ta muốn thiết lập chu kỳ chuyển động là 4s, vậy thì chúng ta sẽ thiết lập như sau.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Thuộc tính #2.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Ví dụ. Chúng ta muốn sau khi tải xong phần tử thì đợi 2 giây sau mới bắt đầu chu kỳ chuyển động đầu tiên.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Thuộc tính #3.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Ví dụ. Chúng ta muốn lặp lại chuyển động 3 lần.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Thuộc tính #4.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

It is could not be set as a in the following words

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  4 (default). Chuyển động tiến về phía trước được bắt đầu từ 

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 trong một chu kỳ

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  7. Chuyển động bắt đầu từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 và chu kỳ tiếp theo là từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  32. Move to redirect, from

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 to

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  35. Chuyển động chu kỳ đầu tiên được phát từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 và chu kỳ thứ hai sẽ được phát từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6

Thuộc tính #5.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Những thuộc tính ở bên trên mà mình mô tả ở trên là phổ biến nhất và được sử dụng thường xuyên nhất

Nhưng cũng có một vài thuộc tính ít phổ biến hơn cũng được sử dụng để thiết lập chuyển động

Cùng lướt qua một chút nhé

Thuộc tính #6.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  43 - Chỉ định chuyển động với khởi động chậm, sau đó nhanh, sau đó kết thúc chậm (ở đây là mặc định)

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  44 - Chỉ định chuyển đổi có cùng tốc độ từ đầu đến cuối

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  45 - Chỉ định chuyển động chậm lúc đầu

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  46 - Chỉ định chuyển động chậm về cuối

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  47 - Chỉ định chuyển động với bắt đầu và kết thúc chậm

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  48 - Cho phép bạn xác định các giá trị của riêng mình trong một hàm

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  49

Thuộc tính #7.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Thuộc tính #8.

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Được,

Bây giờ bạn đã biết các thuộc tính CSS Animation để làm gì, vì thế chúng ta có thể chuyển sang bước tiếp theo, đó là

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

2. Tìm hiểu về Keyframe

Để xác định hành động tùy chỉnh cho phần tử, bạn phải thiết lập một chuỗi hành động

Lúc này, bạn sẽ sử dụng quy tắc

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Trong @keyframe, chúng tôi chỉ định kiểu cho phần tử trong thời gian xuất cụ thể

Chúng ta đang xác định kiểu ít nhất hai bước

• and

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6, is the end of the status

We can also change

Tất nhiên, vì có nhiều khả năng nên bạn sẽ xác định nhiều hơn hai bước, vì vậy chúng tôi sử dụng Tỷ lệ phần trăm để xác định kiểu cho từng phần của chu kỳ chuyển động

Chúng ta hãy xem ví dụ về @keyframe, trong đó chúng ta sẽ xác định một keyframe để thay đổi chiều cao của phần tử

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Vì vậy, trong ví dụ trên, chúng tôi đã tạo ra một khung hình chính được gọi là

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Nó thay đổi chiều cao của phần tử từ

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

mẹo. Thay vì chiều cao thay đổi (

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Trong bước tiếp theo, chúng tôi sẽ thêm chuyển động này vào phần tử HTML để bạn thấy cách nó hoạt động

3. Tạo CSS Animation

Chúng ta có thể tạo một hình ảnh động bằng cách sử dụng viết tắt hoặc gán giá trị cho từng thuộc tính

To set it into a line, các thuộc tính sẽ được sắp xếp lần lượt như sau

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Nếu bạn là người mới bắt đầu tìm hiểu về CSS và CSS Animation, xin giới thiệu bạn gán giá trị riêng cho từng thuộc tính để dễ dàng nắm bắt

Ghi chú. Như ví dụ bên dưới

Ngoài ra, điều đáng ghi nhớ là 

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Nếu bạn không thiết lập

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Bây giờ, hãy thử thiết lập hoạt hình cho phần tử, như sau

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Trong đoạn mã trên, chúng ta chỉ định một

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  74 có nghĩa là phần tử sẽ chuyển động theo keyframe grow (mà ta đã định nghĩa ở trên)

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  75 có nghĩa là chuyển động sẽ kéo dài

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  76 trên mỗi chu kỳ

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  0 có nghĩa là chuyển động sẽ bắt đầu sau 2 giây kể từ khi tải xong phần tử

• div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  78 có nghĩa là chuyển động sẽ lặp lại vô hạn

Thiết lập một hình ảnh động cũng rất dễ thôi phải không?

4. Ví dụ CSS Animation thực tế

Trong các bước trên, bạn đã học cách nào để thiết lập hiệu ứng chuyển động hiệu ứng

Tại đây, hãy vận dụng nó để tạo ra một ví dụ thú vị nhé

Chúng ta sẽ tạo ra một hiệu ứng đang tải

Có rất nhiều cách để tạo hiệu ứng tải ứng dụng bằng hoạt hình

Như ví dụ bên dưới, chúng ta sẽ tạo ra 4 hình vuông và thay đổi chiều cao của chúng để tạo ra hiệu ứng sóng

Please get center into the property

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Bạn cần nhớ,

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Xin hãy nhìn vào ví dụ bên dưới để xem cách nó hoạt động thực sự

Lưu ý. You must be to Codepen. io to pass CAPTCHA before. Sau đó quay lại F5 bài viết để xem ví dụ minh hoạ

Xem Pen Ví dụ CSS Animation của NIIT -ICT Hà Nội (@niiticthanoi) trên CodePen

Lưu ý #2. Mình đã thêm thuộc tính

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

There's mean is

• Sau khi thay đổi kích thước từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 thì

• Chu kỳ tiếp theo nó sẽ giảm từ

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6 đến

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5

• Chu kỳ sau is from

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  5 to

  div {
    height: 10px;
    width: 20px;
    animation-name: grow;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }

  6

Nếu bạn không thiết lập thuộc tính

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

div {
  height: 10px;
  width: 20px;
  animation-name: grow;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Điều này làm cho hiệu ứng không được mượt mà cho lắm

Chúc mừng bạn đã biết sử dụng CSS Animation

Trong bài viết này, chúng ta đã cùng nhau tìm hiểu về những thuộc tính quan trọng nhất của CSS Animation

Đây là phần mình thấy thú vị nhất trong Front end setting

Mình đã giải thích chi tiết từng thuộc tính CSS Animation có thể làm được gì, keyframe hoạt động ra sao và giúp mình thiết lập một CSS Animation thực thế.

Mình hy vọng bạn sẽ thấy bài viết này hữu ích và sẽ sử dụng nó như là bước đầu tiên để xây dựng các hiệu ứng thú vị của riêng mình.

Còn nếu như bạn đã biết nhiều về CSS Animation, hãy chia sẻ những suy nghĩ của bạn về chúng trong phần bình luận để cùng thảo luận nhé.

---

HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI

Học lập trình chất lượng cao (Từ năm 2002). Học thực tế + Tuyển dụng ngay

Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT. 02435574074 - 0968051561
Email. xin chào@niithanoi. giáo dục. vn

trang chủ. https. //Facebook. com/NIIT. CNTT-TT/

#niit #niithanoi niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python