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

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

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

• 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%.

• 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

2. Tìm hiểu về Keyframe

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

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

• 0% thành from

• và 100% thành to

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

3. Tạo CSS Animation

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

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

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

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

• 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ế.

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