WEBVTT

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

00:00:03.202 --> 00:00:05.490
xem nền dùng setInterval

00:00:05.490 --> 00:00:07.103
hay là requestAnimationFrame

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

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

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

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

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

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

00:00:22.485 --> 00:00:24.865
tí JavaScript nào cả.

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

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

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

00:00:34.443 --> 00:00:35.997
thành comment.

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

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

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

00:00:45.472 --> 00:00:47.525
để làm hình động.

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

00:00:52.161 --> 00:00:54.877
ảnh động này... là getbigger...

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

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

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

00:01:01.123 --> 00: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).

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

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

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

00:01:16.528 --> 00:01:18.089
Trong to{}, ta viết

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

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

00:01:24.684 --> 00:01:25.866
bạn nhớ không?

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

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

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

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

00:01:36.207 --> 00:01:37.881
cho ohnoes.

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

00:01:44.052 --> 00:01:46.447
tức là getbigger,

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

00:01:50.942 --> 00:01:52.205
là 3 giây.

00:01:53.287 --> 00:01:54.878
Với một vài trình duyệt thì

00:01:54.878 --> 00:01:56.391
bạn có thể viết thế này là

00:01:56.391 --> 00:01:58.748
xong ngon lành rồi.

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

00:02:00.072 --> 00:02:01.453
như là Safari hay Chrome,

00:02:01.453 --> 00:02:03.473
thì chưa được đâu.

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

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

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

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

00:02:19.352 --> 00: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,

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

00:02:24.156 --> 00:02:25.482
của tính năng đó.

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

00:02:27.819 --> 00: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

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

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

00:02:34.761 --> 00:02:37.278
Vậy ta viết lại đoạn này

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

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

00:02:45.743 --> 00:02:50.008
và thêm -webkit- vào.

00:02:50.008 --> 00:02:51.587
Whoa, hay rồi!

00:02:51.587 --> 00: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.

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

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

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

00:03:02.430 --> 00:03:03.753
bởi vì có khi lại cần dùng

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

00:03:08.107 --> 00:03:10.267
Còn một cách khác dùng CSS

00:03:10.267 --> 00:03:11.730
để tạo hình động,

00:03:11.730 --> 00:03:14.109
đó là thuộc tính transition.

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

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

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

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

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

00:03:28.354 --> 00:03:30.190
ta có thể làm với JavaScript

00:03:30.190 --> 00:03:31.516
bằng cách tạo một event listener

00:03:31.516 --> 00:03:32.899
cho event mouse-over,

00:03:32.899 --> 00:03:34.536
rồi dùng requestAnimationFrame()

00:03:34.536 --> 00:03:37.101
để tăng font-size dần lên,
to increase the font

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

00:03:41.954 --> 00:03:42.815
Nghĩ xem nào.

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

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

00:03:48.713 --> 00:03:50.422
Ta có thể dùng hover.

00:03:50.702 --> 00:03:54.426
Ta viết #countdown:hover...

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

00:03:59.941 --> 00:04:02.703


00:04:02.703 --> 00:04:06.419


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

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

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

00:04:19.444 --> 00:04:21.927
Giờ bạn hãy dừng video 

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

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

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

00:04:31.355 --> 00:04:33.574
bạn không cần vendor prefix gì cả

00:04:33.574 --> 00:04:35.174
với kĩ thuật này.

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

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

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

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

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

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