Thiết kế chuyển động với CSS Animation

Posted on by adminChuyên mục:Kiến thức Internet

Từ khi chúng ta có thể tạo hình động (Animation) trong CSS, nên việc xây dựng các trang web có hiệu ứng chuyển động mượt mà không còn quá khó khăn.

Đối với các trang web mà bạn đang thực hiện, đôi khi không cần phải đập đi xây lại.

Chỉ cần thêm một hoặc hai hiệu ứng animation để làm cho nó sinh động, thú vị hơn.

Lưu ý: Đừng lạm dụng CSS Animation mà khiến website trở thành con rùa.

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 ra hiệu ứng thú vị với CSS Animation.

Thiết kế chuyển động với CSS Animation

Thiết kế hoạt động với CSS Animation

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

Mục lụ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 tiễn

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

Việc thiết lập một animation được thực hiện bằng cách gán thuộc tính animation trong lúc 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 (duration), thời gian (timing), độ trễ (delay) 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 gì, hãy cùng xem chi tiết bên dưới đây:

Thuộc tính #1: animation-duration – Xác định thời gian cho một chu kỳ chuyển động, thường được đặt thành s hoặc ms.

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

Thuộc tính #2: animation-delay – Xác định thời gian giữa thời điểm tải xong phần tử và bắt đầu chu kỳ chuyển động đầu tiên, nó cũng được đặt là s hoặc ms.

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

Thuộc tính #3: animation-iteration-count – Xác định có bao nhiêu chu kỳ chuyển động sẽ được lặp lại, nó có thể được đặt thành infinite nếu bạn muốn nó lặp lại mãi mãi.

Ví dụ: Chúng ta muốn lặp lại chuyển động 3 lần: animation-iteration-count: 3

Thuộc tính #4: animation-direction – Xác định nếu chuyển động sẽ thay đổi hướng hoặc bắt đầu ở cùng một nơi mỗi lần sau khi reset.

Nó có thể được đặt là một trong những từ khóa sau:

  • normal (mặc định): Chuyển động tiến về phía trước được bắt đầu từ 0% đến 100% trong một chu kỳ.

  • alternate: Chuyển động bắt đầu từ 0% đến 100% và chu kỳ tiếp theo là từ 100% đến 0%.

  • reverse: Chuyển theo hướng ngược lại, từ 100% đến 0%.

  • alternate-reverse: Chuyển động chu kỳ đầu tiên được phát từ 100% đến 0% và chu kỳ thứ hai sẽ được phát từ 0% đến 100%.

Thuộc tính # 5 : 

animation-name – Xác định tên của @keyframe

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 : 

animation-timing-function – Xác định thời gian của các chuyển động, có nghĩa là thiết lập đường cong gia tốc để xác định chuyển động qua các keyframe.

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

  • linear – Chỉ định chuyển động có cùng tốc độ từ đầu đến cuối

  • easy-in – Chỉ định chuyển động chậm lúc đầu

  • easy-out – Chỉ định chuyển động chậm về cuối

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

  • cub-bezier(n, n, n, n) – Cho phép bạn xác định các giá trị của riêng trong một hàm bezier

Thuộc tính # 7 :

animation-fill-mode – Xác định các giá trị được áp dụng cho phần tử trước chuyển động và sau khi nó được thực thi.

Thuộc tính #8: animation-play-state – Cho phép tạm dừng và khởi động lại chuỗi chuyển động.

Ok,

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à @keyframe.

2. Tìm hiểu về Keyframe

Để xác định hành vi 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 @keyframe.

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

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

  • 0% là trạng thái bắt đầu

  • và 100%, là trạng thái cuối cùng.

Chúng ta cũng hoàn toàn có thể biến hóa :

  • 0% thành from

  • và 100% thành to

Tất nhiên, vì có nhiều khả năng bạn sẽ xác định nhiều hơn hai bước, vì vậy chúng ta 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ử:

@ keyframe grow {
  0% { height: 20 px }
  50% { height 60 px }
  100% { height 100 px }
}

Vì vậy, trong ví dụ trên, chúng ta đã tạo ra một keyframe gọi là grow.

Nó thay đổi chiều cao của phần tử từ 20px, đến giữa chu kỳ thì tăng đến 60px. Sau đó tiếp tục tăng đến 100px khi hết chu kỳ.

Mẹo: Thay vì thay đổi chiều cao (height), bạn có thể sử dụng thuộc tính transform: scaleY(). Vừa mượt mà hơn vừa đem lại hiệu suất tốt hơn.

Trong bước tiếp theo, tất cả chúng ta sẽ thêm hoạt động này vào thành phần HTML để bạn thấy cách nó hoạt động giải trí .

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.

Để đặt nó thành một dòng, các thuộc tính sẽ được sắp xếp lần lượt như sau:

animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state ;

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

Note: Như ví dụ bên dưới!

Ngoài ra, điều đáng ghi nhớ là animation-duration phải được thiết lập để làm cho animation hoạt động.

Nếu bạn không thiết lập animation-duration, thì bạn sẽ không thấy hiệu ứng gì cả.

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

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

Trong đoạn code trên, chúng ta đã chỉ định một animation cho phần tử div.

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

  • animation-duration: 5s có nghĩa là chuyển động sẽ kéo dài 5s trên mỗi chu kỳ.

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

  • animation-interation-count: infinite có nghĩa là chuyển động sẽ lặp lại vô hạn.

Thiết lập một animation 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 làm thế nào để thiết lập một hiệu ứng chuyển động animation.

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 loading…

Có rất nhiều cách để tạo ra một hiệu ứng loading sử dụng animation.

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.

Hãy tập trung vào thuộc tính animation-delay để thấy các hình vuông bắt đầu chuyển động theo thứ tự từ trái sang phải để tạo ra hiệu ứng chuyển tiếp.

Bạn cần nhớ, animation-delay quyết định sẽ chờ bao lâu (sau khi tải xong) để bắt bắt đầu hiệu ứng animation.

> Điểm này khá là quan trọng trong việc tối ưu hiệu suất Animation

Codepen.io để vượt CAPTCHA trước. Sau đó quay lại F5 bài viết để xem ví dụ minh họaLưu ý : Bạn cần vàođể vượt CAPTCHA trước. Sau đó quay lại F5 bài viết để xem ví dụ minh họaXin hãy nhìn vào ví dụ bên dưới để xem cách nó hoạt động giải trí thực sự :

See the Pen Ví dụ CSS Animation by NIIT – ICT Thành Phố Hà Nội ( @ niiticthanoi ) on CodePen .

codepen.io và load lại bài viết này.Lưu ý # 1 : Để xem được code bạn phải mở tab khác vàovà load lại bài viết này .

Lưu ý #2: Mình đã thêm thuộc tính animation-direction: alternate; để đảo chuyển động chạy ngược lại từ 100%.

Có nghĩa là:

  • Sau khi thay đổi kích thước từ 0% đến 100% thì…

  • Chu kỳ tiếp theo nó sẽ giảm từ 100% đến 0%…

  • Chu kỳ sau là từ 0% đến 100%

  • …. cứ thế .

Nếu bạn không thiết lập thuộc tính animation-direction thì sau khi thay đổi kích thước đến 100% thì nó sẽ quay lại ngay kích thước 0%.

Điều này khiến 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 tìm hiểu về những thuộc tính quan trọng nhất của CSS Animation.

Đây là một phần mình thấy thú vị nhất trong lập trình Front end.

Mình cũng đã giải thích chi tiết từng thuộc tính CSS Animation có thể làm gì, keyframe hoạt động ra sao và giúp bạn 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 ( Since 2002 ). Học trong thực tiễn + Tuyển dụng ngay !

Đc : Tầng 3, 25T2, N05, Nguyễn Thị Thập, CG cầu giấy, Thành Phố Hà Nội

SĐT : 02435574074 – 0968051561
E-Mail : [email protected]

Fanpage: https://facebook.com/NIIT.ICT/

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

admin