Ok, giờ chắc là bạn đang tự băn khoăn

xem nền dùng setInterval

hay là requestAnimationFrame

trong hình động của mình.

Nhưng mà tôi sẽ đưa cho bạn

thêm nguyên một lựa chọn nữa.

Trong Chrome, Firefox và IE 10 trở lên,

có một cách sử dụng CSS

để tạo hình động mà không phải dùng

tí JavaScript nào cả.

Ta sẽ bỏ hết đoạn code này đi

và thử tạo hình Oh Noes động kiểu CSS.

Tôi sẽ biến toàn bộ đoạn này

thành comment.

Ta bắt đầu với việc tạo style cho trang này,

rồi thêm một cái mà trông giống

như CSS, nhưng thực ra là

để làm hình động.

Viết @keyframes... rồi tên của

ảnh động này... là getbigger...

rồi dấu ngoặc móc.

Để tạo một ảnh động đơn giản, từ

trang thái này chuyển động tới trạng thái khác,

ta sẽ định nghĩa trạng thái bắt đầu (from) và trạng thái kết thúc (to).

Ở tron from{}, ta sẽ viết

các thuộc tính CSS lúc khởi điểm.

Bạn còn nhớ, ta đặt kích thước ban đầu là 50px.

Trong to{}, ta viết

thuộc tính của ảnh này khi kết thúc.

Hình như lúc kết thúc là 300px,

bạn nhớ không?

Giờ ta đã định nghĩa ảnh động này rồi,

ta cần báo cho trình duyệt biết xem element nào

sẽ chuyển động như thế,

nên là ta sẽ viết thêm CSS kiểu bình thường

cho ohnoes.

Trong này, ta ghi ra tên của hình động,

tức là getbigger,

rồi đến thời gian chuyển động,

là 3 giây.

Với một vài trình duyệt thì

bạn có thể viết thế này là

xong ngon lành rồi.

Nhưng trong các trình duyệt khác,

như là Safari hay Chrome,

thì chưa được đâu.

Lí do là vì một cái gọi là vendor prefixes.

Tức là khi trình duyệt bắt đầu

cho phép sử dụng một tính năng mới,

người ta đặt vendor prefix vào trước tên của tính năng đó,

để thấy là tính năng này chưa hoàn thiện, có thể còn được sửa đổi,

đây mới là bản chưa hoàn chỉnh

của tính năng đó.

Như vậy, để sử dụng tính năng này trong Chrome

nếu mà Chrome bạn thử với Chrome vẫn chưa được, thì bạn cần viết lại

những gì ta đã viết kia,

và thêm cái vendor prefix, tức là webkit, lên đằng trước.

Vậy ta viết lại đoạn này

và thêm -webkit- vào đây.

Rồi ta viết lại đoạn này nữa

và thêm -webkit- vào.

Whoa, hay rồi!

Giờ thì ảnh này chuyển động được trên tất cả các tình duyệt rồi.

Mong là khi bạn xem hướng dẫn này thì

không cần phải dụng cái vendor prefix này nữa,

nhưng mà bạn vẫn nên biết cách dùng,

bởi vì có khi lại cần dùng

với một tính năng mới khác trong tương lai.

Còn một cách khác dùng CSS

để tạo hình động,

đó là thuộc tính transition.

Thuộc tính này khiến trình duyệt chuyển đổi

từ một giá trị thuộc tính ban đầu tới một giá trị khác.

Ví dụ nếu ta muốn font-size

của số đếm giây kia to dần lên khi

người dùng di chuột vào số đó,

ta có thể làm với JavaScript

bằng cách tạo một event listener

cho event mouse-over,

rồi dùng requestAnimationFrame()

để tăng font-size dần lên,
to increase the font

nhưng ta cũng có thể làm thế chỉ với CSS thôi.

Nghĩ xem nào.

Thường thì ta làm sao để biến font-size

thành to hơn khi di chuột mà chỉ dùng CSS?

Ta có thể dùng hover.

Ta viết #countdown:hover...

rồi đến font-size:150px.

cho biết quá trình chuyển đổi mất bao lâu,

sử dụng hàm tính thời gian thế nào.

Vậy ta viết transtion; font-size 1s linear;

Giờ bạn hãy dừng video

và thử di chuột qua dòng chữ xem có gì không.

Nếu bạn dùng Chrome, Firefox hoặc IE 10 trở lên,

thì cỡ chữ sẽ to dần ra rất mượt,

bạn không cần vendor prefix gì cả

với kĩ thuật này.

Còn rất nhiều thứ bạn có thể làm

để tạo ảnh động bằng CSS,

và các trình duyệt bây giờ cũng

hỗ trợ những tính năng này khá tốt.

Vậy nên tôi khuyến khích bạn nên tỉm hiểu

thật kĩ hơn về những tính năng này