Có nên dùng dim text animation

Thiết kế chuyển độ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 tế

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: 

div { height: 10px; width: 20px; animation-name: grow; animation-duration: 5s; animation-delay: 2s; animation-iteration-count: infinite; }0 - 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

div { height: 10px; width: 20px; animation-name: grow; animation-duration: 5s; animation-delay: 2s; animation-iteration-count: infinite; }1 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:

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

Thuộc tính #4: 

div { height: 10px; width: 20px; animation-name: grow; animation-duration: 5s; animation-delay: 2s; animation-iteration-count: infinite; }3 - 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:

• div { height: 10px; width: 20px; animation-name: grow; animation-duration: 5s; animation-delay: 2s; animation-iteration-count: infinite; }4 (mặc định): 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.

• animation-duration2: Chuyển theo hướng ngược lại, 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.

• animation-duration5: 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: s0 - Xác định tên của s1

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: s2 - 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.

• s3 - 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)

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

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

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

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

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

Thuộc tính #7: ms0 - 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: ms1 - 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à s1.

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 s1.

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:

• và

  div { height: 10px; width: 20px; animation-name: grow; animation-duration: 5s; animation-delay: 2s; animation-iteration-count: infinite; }6, là trạng thái cuối cùng.

Chúng ta cũng có thể thay đổi:

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: 20px } 50% { height 60px } 100% { height 100px } }

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

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

Mẹo: Thay vì thay đổi chiều cao (ms9), bạn có thể sử dụng thuộc tính animation-duration: 4s0. 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, chúng ta 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.

Để đặ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-duration: 4s1: s0, animation-duration, s2, animation-delay,

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

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

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: 10px; width: 20px; animation-name: grow; animation-duration: 5s; animation-delay: 2s; animation-iteration-count: infinite; }

Trong đoạn code trên, chúng ta đã chỉ định một animation-duration: 4s1 cho phần tử animation-delay3.

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

• animation-delay5 có nghĩa là chuyển động sẽ kéo dài animation-delay6 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-delay8 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.

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 ý: Bạn cần vào Codepen.io để vượt CAPTCHA trước. Sau đó quay lại F5 bài viết để xem ví dụ minh họa

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

Lưu ý #2: Mình đã thêm thuộc tính s1 để đảo chuyển động chạy ngược lại từ

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

Có nghĩa là:

• 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 là 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

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; }3 thì sau khi thay đổi kích thước đến

div { height: 10px; width: 20px; animation-name: grow; animation-duration: 5s; animation-delay: 2s; animation-iteration-count: infinite; }6 thì nó sẽ quay lại ngay kích thước

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

Đ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 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: [email protected]

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

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