0:00:00.896,0:00:03.202
Ok, giờ chắc là bạn đang tự băn khoăn

0:00:03.202,0:00:05.490
xem nền dùng setInterval

0:00:05.490,0:00:07.103
hay là requestAnimationFrame

0:00:07.103,0:00:08.645
trong hình động của mình.

0:00:08.645,0:00:10.423
Nhưng mà tôi sẽ đưa cho bạn

0:00:10.423,0:00:12.708
thêm nguyên một lựa chọn nữa.

0:00:13.662,0:00:17.086
Trong Chrome, Firefox và IE 10 trở lên,

0:00:17.086,0:00:20.046
có một cách sử dụng CSS

0:00:20.046,0:00:22.485
để tạo hình động mà không phải dùng

0:00:22.485,0:00:24.865
tí JavaScript nào cả.

0:00:24.865,0:00:27.605
Ta sẽ bỏ hết đoạn code này đi

0:00:27.605,0:00:29.983
và thử tạo hình Oh Noes động kiểu CSS.

0:00:30.797,0:00:34.443
Tôi sẽ biến toàn bộ đoạn này

0:00:34.443,0:00:35.997
thành comment.

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

0:00:40.898,0:00:43.069
rồi thêm một cái mà trông giống

0:00:43.069,0:00:45.472
như CSS, nhưng thực ra là

0:00:45.472,0:00:47.525
để làm hình động.

0:00:48.049,0:00:52.161
Viết @keyframes... rồi tên của

0:00:52.161,0:00:54.877
ảnh động này... là getbigger...

0:00:54.877,0:00:56.640
rồi dấu ngoặc móc.

0:00:57.383,0:00:58.963
Để tạo một ảnh động đơn giản, từ

0:00:58.963,0:01:01.123
trang thái này chuyển động tới trạng thái khác,

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

0:01:07.520,0:01:10.143
Ở tron from{}, ta sẽ viết

0:01:10.143,0:01:12.102
các thuộc tính CSS lúc khởi điểm.

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

0:01:16.528,0:01:18.089
Trong to{}, ta viết

0:01:18.089,0:01:20.096
thuộc tính của ảnh này khi kết thúc.

0:01:21.120,0:01:24.684
Hình như lúc kết thúc là 300px,

0:01:24.684,0:01:25.866
bạn nhớ không?

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

0:01:28.392,0:01:30.875
ta cần báo cho trình duyệt biết xem element nào

0:01:30.875,0:01:33.012
sẽ chuyển động như thế,

0:01:33.593,0:01:36.207
nên là ta sẽ viết thêm CSS kiểu bình thường

0:01:36.207,0:01:37.881
cho ohnoes.

0:01:39.253,0:01:42.309
Trong này, ta ghi ra tên của hình động,

0:01:44.052,0:01:46.447
tức là getbigger,

0:01:47.285,0:01:50.441
rồi đến thời gian chuyển động,

0:01:50.942,0:01:52.205
là 3 giây.

0:01:53.287,0:01:54.878
Với một vài trình duyệt thì

0:01:54.878,0:01:56.391
bạn có thể viết thế này là

0:01:56.391,0:01:58.748
xong ngon lành rồi.

0:01:58.748,0:02:00.072
Nhưng trong các trình duyệt khác,

0:02:00.072,0:02:01.453
như là Safari hay Chrome,

0:02:01.453,0:02:03.473
thì chưa được đâu.

0:02:03.473,0:02:07.987
Lí do là vì một cái gọi là vendor prefixes.

0:02:09.859,0:02:12.837
Tức là khi trình duyệt bắt đầu

0:02:13.883,0:02:15.951
cho phép sử dụng một tính năng mới,

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

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

0:02:22.060,0:02:24.156
đây mới là bản chưa hoàn chỉnh

0:02:24.156,0:02:25.482
của tính năng đó.

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

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

0:02:30.244,0:02:31.696
những gì ta đã viết kia,

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

0:02:34.761,0:02:37.278
Vậy ta viết lại đoạn này

0:02:38.243,0:02:41.260
và thêm -webkit- vào đây.

0:02:42.098,0:02:45.219
Rồi ta viết lại đoạn này nữa

0:02:45.743,0:02:50.008
và thêm -webkit- vào.

0:02:50.008,0:02:51.587
Whoa, hay rồi!

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

0:02:55.685,0:02:58.053
Mong là khi bạn xem hướng dẫn này thì

0:02:58.053,0:03:00.271
không cần phải dụng cái vendor prefix này nữa,

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

0:03:02.430,0:03:03.753
bởi vì có khi lại cần dùng

0:03:03.753,0:03:06.248
với một tính năng mới khác trong tương lai.

0:03:08.107,0:03:10.267
Còn một cách khác dùng CSS

0:03:10.267,0:03:11.730
để tạo hình động,

0:03:11.730,0:03:14.109
đó là thuộc tính transition.

0:03:14.551,0:03:17.754
Thuộc tính này khiến trình duyệt chuyển đổi

0:03:17.754,0:03:20.110
từ một giá trị thuộc tính ban đầu tới một giá trị khác.

0:03:20.611,0:03:23.107
Ví dụ nếu ta muốn font-size

0:03:23.107,0:03:26.671
của số đếm giây kia to dần lên khi

0:03:26.671,0:03:28.354
người dùng di chuột vào số đó,

0:03:28.354,0:03:30.190
ta có thể làm với JavaScript

0:03:30.190,0:03:31.516
bằng cách tạo một event listener

0:03:31.516,0:03:32.899
cho event mouse-over,

0:03:32.899,0:03:34.536
rồi dùng requestAnimationFrame()

0:03:34.536,0:03:37.101
để tăng font-size dần lên,[br]to increase the font

0:03:37.101,0:03:41.954
nhưng ta cũng có thể làm thế chỉ với CSS thôi.

0:03:41.954,0:03:42.815
Nghĩ xem nào.

0:03:42.815,0:03:44.998
Thường thì ta làm sao để biến font-size

0:03:44.998,0:03:48.374
thành to hơn khi di chuột mà chỉ dùng CSS?

0:03:48.713,0:03:50.422
Ta có thể dùng hover.

0:03:50.702,0:03:54.426
Ta viết #countdown:hover...

0:03:54.426,0:03:59.265
rồi đến font-size:150px.

0:03:59.941,0:04:02.703


0:04:02.703,0:04:06.419


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

0:04:08.926,0:04:11.387
sử dụng hàm tính thời gian thế nào.

0:04:11.387,0:04:16.387
Vậy ta viết transtion; font-size 1s linear;

0:04:19.444,0:04:21.927
Giờ bạn hãy dừng video

0:04:21.927,0:04:25.293
và thử di chuột qua dòng chữ xem có gì không.

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

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

0:04:31.355,0:04:33.574
bạn không cần vendor prefix gì cả

0:04:33.574,0:04:35.174
với kĩ thuật này.

0:04:35.651,0:04:37.078
Còn rất nhiều thứ bạn có thể làm

0:04:37.078,0:04:39.318
để tạo ảnh động bằng CSS,

0:04:39.318,0:04:40.550
và các trình duyệt bây giờ cũng

0:04:40.550,0:04:42.129
hỗ trợ những tính năng này khá tốt.

0:04:42.129,0:04:43.556
Vậy nên tôi khuyến khích bạn nên tỉm hiểu

0:04:43.556,0:00:00.000
thật kĩ hơn về những tính năng này