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

Bài này sẽ hướng dẫn các bạn cách tạo animation trong css. Trước hết hãy tìm hiểu về lý thuyết để có nền tảng cơ bản trước khi bắt tay vào thiết kế các thí dụ, hoặc chỉ đơn giản là "customize" một thí dụ đã có sẵn trên mạng theo các cách sáng tạo của riêng bạn.

Tìm hiểu thêm: Frontend-developer đã hô biến animation trong mắt người dùng như thế nào?

Sẽ có những bạn sẽ hỏi: Đã có rất nhiều công cụ thiết kế ảnh động trên thị trường, sao cần phải "phát minh" ra các kỹ thuật này trên nền Web?

Thực tế thì mục đích của CSS Animation không giống với quy trình tạo ảnh động từ các công cụ chuyên nghiệp. CSS Animation tạo ra các ảnh động có thể "tương tác" được với người dùng, thí dụ như di chuột (hover), kích chuột (click)... CSS Animation thậm chí tạo ra các loại game nhỏ (gamification), hay gặp trong các gameshow của Web giáo dục.

Quy tắc Keyframe

Bên trong quy tắc này, bạn xác định các keyframe để quy định việc phần tử sẽ chuyển động ra sao tại mỗi thời điểm nhất định.

Cú pháp của keyframe:

@keyframes Name { 
  /*code*/
}

Name: tên của animation bạn muốn tạo.
code: Các đoạn code quy định tiến trình chuyển động. Có 2 dạng:
- Sử dụng phần trăm từ 0% đến 100%.
- from...to: thiết lập giá trị từ khởi đầu (from - tương đương với 0%) đến kết thúc (to - tương đương với 100%).

CSS Animation là gì?

Animation được hiểu là hiệu ứng chuyển động, sử dụng để tạo hiệu ứng di chuyển cho các phần tử và được ứng dụng khá nhiều trong các website hiện nay.

Để tạo một chuyển động Animation, bạn cần phải có các keyframe. Mỗi keyframe sẽ được chạy ở một thời điểm xác định và trong keyframe đó nó quy định việc phần tử sẽ di chuyển ra sao.

Ngoài ra, Animation còn gồm một số thuộc tính quy định các chi tiết khá quan trọng của hiệu ứng thường đi kèm như:

Thuộc tính animation-name
Thuộc tính animation-duration
Thuộc tính animation-timing-function
Thuộc tính animation-delay
Thuộc tính animation-iteration-count
Thuộc tính aniamtion-direction
Thuộc tính animation-fill-mode

Thuộc tính tổng hợp: animation: tên-animation time forwards;

Một số thuộc tính riêng

animation-name: tên animation sẽ áp dụng cho đối tượng.
animation-delay: thời gian hoãn animation;
animation-iteration-count: số lầ thực hiện;
animation-direction: chiều chạy animation;

Các giá trị có thể sử dụng cho animation-direction:

normal – animation chạy tự bình thường (đây là giá trị mặc định)
reverse – animation sẽ chạy ngược lại so với bình thường
alternate – animation sẽ chạy bình thường ở các lượt lẻ (1,3,5,7,…) và chạy ngược lại ở các lượt chẵn (2,4,6,8,…)
alternate-reverse – animation sẽ chạy ngược lại ở các lượt lẻ (1,3,5,7,…) và chạy bình thường ở các lượt chẵn (2,4,6,8,…)
animation-fill-mode: xác định trạng thái của một animation, khi mà animation không được chạy (có thể là animation này đã chạy xong hoặc đang bị delay)

Các giá trị có thể sử dụng:

none – đây là giá trị mặc định. Khi mà animation không hoạt động nữa thì nó sẽ không thêm một style nào vào thành phần.
forwards – khi mà animation không hoạt động nữa thì nó sẽ apply hết tất cả các thuộc tính cuối cùng của animation
backwards – khi mà animation không hoạt động nữa nó sẽ apply tất cả các giá trị của thuộc tính trong lần đầu xuất hiện trong keyfames (phụ thuộc vào thuộc tính anmation-direction)
both

Thuộc tính animation-timing-function.

-Thuộc tính này có tác dụng xác định tốc độ chuyển động của một animation sẽ như thế nào.

Cú Pháp:

animation-timing-function: value;

Trong đó, value là một trong các giá trị sau:

linear - chuyển động cùng 1 tốc độ từ đầu đến cuối.
ease - chuyển động lúc đầu chậm sau đó nhanh dần và lại chậm dần về cuối (đây là giá trị mặc định)
ease-in - chuyển động chậm ở đầu
ease-out - chuyển động chậm ở nửa cuối
ease-in-out - chuyển động chậm cả ở đầu và về cuối
step-start
step-end
steps(int,start|end) - chia animation ra thành các bước (int)
cubic-bezier(n,n,n,n) - xem demo

Các thuộc tính tạo nên chuyển động mượt mà cho hoạt ảnh Animation

Trong quá trình tạo các hoạt ảnh Animation, bạn có thể áp dụng các thuộc tính sau để tăng sinh động mượt mà cho chuyển động.

+ bachground-image:-webkit-linear-gradient(left, red 0%, orange 50%, yellow 100%), hiệu ứng đổ màu gradient

+ transform:scale(2), hiệu ứng zoom, phóng to thu nhỏ

+ transform: rotate(-45deg) để xoay khối div góc 45 độ. Xem thí dụ: https://codepen.io/kmathmann/pen/RaGqRr

+ border-radius: 5px; bo tròn các góc của khối với bán kính 5px

+ background-size: cover, để hình luôn đầy 100% khối

+ background-attachment: fixed (cố đinh hình nền khi cuộn trang)

+ margin: auto, tự động canh biên

+ text-transform: uppercase, tự động viết hoa

+ box-shadow: 2px 2px 7px; tạo đổ bóng (các thông số lần lượt là đổ sang phải, bên dưới, độ rộng của bóng mờ)

+ transition: 0.4s; tùy chỉnh lại các hiệu ứng

+ display: block, biến thẻ không xuống dòng thành khối để hiểu được thuộc tính margin

+ display: inline, biến thành các thẻ không xuống dòng

Thí dụ tạo một "loading gif" sử dụng CSS Animation

Loading gif là một ảnh động sẽ khiến tốc độ load Web chậm hơn so với dùng CSS. Bạn có thể tìm kiếm một kho về CSS Loading như vậy trên google. Thí dụ bạn có thể bắt đầu với chuyển động quay đơn giản nhưng đầy sức sáng tạo và hiện đại qua thí dụ demo: https://ihatetomatoes.net/create-css3-spinning-preloader

Demo: https://ihatetomatoes.net/demos/css3-preloader

Một số thí dụ nâng cao

Để không bị "nhàm chán" bởi lý thuyết và những thí dụ quá đơn giản, các bạn có thể thử tìm các thí dụ trên mạng về những ý tưởng animation mới lạ. Thí dụ nếu bạn yêu thích vũ trụ, có thể nghiên cứu CSS Animation về solar system.