[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.90,0:00:03.20,Default,,0000,0000,0000,,Ok, giờ chắc là bạn đang tự băn khoăn
Dialogue: 0,0:00:03.20,0:00:05.49,Default,,0000,0000,0000,,xem nền dùng setInterval
Dialogue: 0,0:00:05.49,0:00:07.10,Default,,0000,0000,0000,,hay là requestAnimationFrame
Dialogue: 0,0:00:07.10,0:00:08.64,Default,,0000,0000,0000,,trong hình động của mình.
Dialogue: 0,0:00:08.64,0:00:10.42,Default,,0000,0000,0000,,Nhưng mà tôi sẽ đưa cho bạn 
Dialogue: 0,0:00:10.42,0:00:12.71,Default,,0000,0000,0000,,thêm nguyên một lựa chọn nữa.
Dialogue: 0,0:00:13.66,0:00:17.09,Default,,0000,0000,0000,,Trong Chrome, Firefox và IE 10 trở lên,
Dialogue: 0,0:00:17.09,0:00:20.05,Default,,0000,0000,0000,,có một cách sử dụng CSS
Dialogue: 0,0:00:20.05,0:00:22.48,Default,,0000,0000,0000,,để tạo hình động mà không phải dùng
Dialogue: 0,0:00:22.48,0:00:24.86,Default,,0000,0000,0000,,tí JavaScript nào cả.
Dialogue: 0,0:00:24.86,0:00:27.60,Default,,0000,0000,0000,,Ta sẽ bỏ hết đoạn code này đi
Dialogue: 0,0:00:27.60,0:00:29.98,Default,,0000,0000,0000,,và thử tạo hình Oh Noes động kiểu CSS.
Dialogue: 0,0:00:30.80,0:00:34.44,Default,,0000,0000,0000,,Tôi sẽ biến toàn bộ đoạn này 
Dialogue: 0,0:00:34.44,0:00:35.100,Default,,0000,0000,0000,,thành comment.
Dialogue: 0,0:00:36.86,0:00:40.14,Default,,0000,0000,0000,,Ta bắt đầu với việc tạo style cho trang này,
Dialogue: 0,0:00:40.90,0:00:43.07,Default,,0000,0000,0000,,rồi thêm một cái mà trông giống
Dialogue: 0,0:00:43.07,0:00:45.47,Default,,0000,0000,0000,,như CSS, nhưng thực ra là 
Dialogue: 0,0:00:45.47,0:00:47.52,Default,,0000,0000,0000,,để làm hình động.
Dialogue: 0,0:00:48.05,0:00:52.16,Default,,0000,0000,0000,,Viết @keyframes... rồi tên của
Dialogue: 0,0:00:52.16,0:00:54.88,Default,,0000,0000,0000,,ảnh động này... là getbigger...
Dialogue: 0,0:00:54.88,0:00:56.64,Default,,0000,0000,0000,,rồi dấu ngoặc móc.
Dialogue: 0,0:00:57.38,0:00:58.96,Default,,0000,0000,0000,,Để tạo một ảnh động đơn giản, từ
Dialogue: 0,0:00:58.96,0:01:01.12,Default,,0000,0000,0000,,trang thái này chuyển động tới trạng thái khác,
Dialogue: 0,0:01:01.12,0:01:06.12,Default,,0000,0000,0000,,ta sẽ định nghĩa trạng thái bắt đầu (from) và trạng thái kết thúc (to).
Dialogue: 0,0:01:07.52,0:01:10.14,Default,,0000,0000,0000,,Ở tron from{}, ta sẽ viết
Dialogue: 0,0:01:10.14,0:01:12.10,Default,,0000,0000,0000,,các thuộc tính CSS lúc khởi điểm.
Dialogue: 0,0:01:12.50,0:01:16.22,Default,,0000,0000,0000,,Bạn còn nhớ, ta đặt kích thước ban đầu là 50px.
Dialogue: 0,0:01:16.53,0:01:18.09,Default,,0000,0000,0000,,Trong to{}, ta viết
Dialogue: 0,0:01:18.09,0:01:20.10,Default,,0000,0000,0000,,thuộc tính của ảnh này khi kết thúc.
Dialogue: 0,0:01:21.12,0:01:24.68,Default,,0000,0000,0000,,Hình như lúc kết thúc là 300px,
Dialogue: 0,0:01:24.68,0:01:25.87,Default,,0000,0000,0000,,bạn nhớ không?
Dialogue: 0,0:01:26.41,0:01:28.39,Default,,0000,0000,0000,,Giờ ta đã định nghĩa ảnh động này rồi,
Dialogue: 0,0:01:28.39,0:01:30.88,Default,,0000,0000,0000,,ta cần báo cho trình duyệt biết xem element nào
Dialogue: 0,0:01:30.88,0:01:33.01,Default,,0000,0000,0000,,sẽ chuyển động như thế,
Dialogue: 0,0:01:33.59,0:01:36.21,Default,,0000,0000,0000,,nên là ta sẽ viết thêm CSS kiểu bình thường
Dialogue: 0,0:01:36.21,0:01:37.88,Default,,0000,0000,0000,,cho ohnoes.
Dialogue: 0,0:01:39.25,0:01:42.31,Default,,0000,0000,0000,,Trong này, ta ghi ra tên của hình động,
Dialogue: 0,0:01:44.05,0:01:46.45,Default,,0000,0000,0000,,tức là getbigger,
Dialogue: 0,0:01:47.28,0:01:50.44,Default,,0000,0000,0000,,rồi đến thời gian chuyển động,
Dialogue: 0,0:01:50.94,0:01:52.20,Default,,0000,0000,0000,,là 3 giây.
Dialogue: 0,0:01:53.29,0:01:54.88,Default,,0000,0000,0000,,Với một vài trình duyệt thì
Dialogue: 0,0:01:54.88,0:01:56.39,Default,,0000,0000,0000,,bạn có thể viết thế này là
Dialogue: 0,0:01:56.39,0:01:58.75,Default,,0000,0000,0000,,xong ngon lành rồi.
Dialogue: 0,0:01:58.75,0:02:00.07,Default,,0000,0000,0000,,Nhưng trong các trình duyệt khác,
Dialogue: 0,0:02:00.07,0:02:01.45,Default,,0000,0000,0000,,như là Safari hay Chrome,
Dialogue: 0,0:02:01.45,0:02:03.47,Default,,0000,0000,0000,,thì chưa được đâu.
Dialogue: 0,0:02:03.47,0:02:07.99,Default,,0000,0000,0000,,Lí do là vì một cái gọi là vendor prefixes.
Dialogue: 0,0:02:09.86,0:02:12.84,Default,,0000,0000,0000,,Tức là khi trình duyệt bắt đầu 
Dialogue: 0,0:02:13.88,0:02:15.95,Default,,0000,0000,0000,,cho phép sử dụng một tính năng mới,
Dialogue: 0,0:02:15.95,0:02:19.35,Default,,0000,0000,0000,,người ta đặt vendor prefix vào trước tên của tính năng đó,
Dialogue: 0,0:02:19.35,0:02:22.06,Default,,0000,0000,0000,,để thấy là tính năng này chưa hoàn thiện, có thể còn được sửa đổi,
Dialogue: 0,0:02:22.06,0:02:24.16,Default,,0000,0000,0000,,đây mới là bản chưa hoàn chỉnh
Dialogue: 0,0:02:24.16,0:02:25.48,Default,,0000,0000,0000,,của tính năng đó.
Dialogue: 0,0:02:25.96,0:02:27.82,Default,,0000,0000,0000,,Như vậy, để sử dụng tính năng này trong Chrome
Dialogue: 0,0:02:27.82,0:02:30.24,Default,,0000,0000,0000,,nếu mà Chrome bạn thử với Chrome vẫn chưa được, thì bạn cần viết lại
Dialogue: 0,0:02:30.24,0:02:31.70,Default,,0000,0000,0000,,những gì ta đã viết kia,
Dialogue: 0,0:02:31.70,0:02:33.90,Default,,0000,0000,0000,,và thêm cái vendor prefix, tức là webkit, lên đằng trước.
Dialogue: 0,0:02:34.76,0:02:37.28,Default,,0000,0000,0000,,Vậy ta viết lại đoạn này
Dialogue: 0,0:02:38.24,0:02:41.26,Default,,0000,0000,0000,,và thêm -webkit- vào đây.
Dialogue: 0,0:02:42.10,0:02:45.22,Default,,0000,0000,0000,,Rồi ta viết lại đoạn này nữa
Dialogue: 0,0:02:45.74,0:02:50.01,Default,,0000,0000,0000,,và thêm -webkit- vào.
Dialogue: 0,0:02:50.01,0:02:51.59,Default,,0000,0000,0000,,Whoa, hay rồi!
Dialogue: 0,0:02:51.59,0:02:54.82,Default,,0000,0000,0000,,Giờ thì ảnh này chuyển động được trên tất cả các tình duyệt rồi.
Dialogue: 0,0:02:55.68,0:02:58.05,Default,,0000,0000,0000,,Mong là khi bạn xem hướng dẫn này thì
Dialogue: 0,0:02:58.05,0:03:00.27,Default,,0000,0000,0000,,không cần phải dụng cái vendor prefix này nữa,
Dialogue: 0,0:03:00.27,0:03:02.43,Default,,0000,0000,0000,,nhưng mà bạn vẫn nên biết cách dùng,
Dialogue: 0,0:03:02.43,0:03:03.75,Default,,0000,0000,0000,,bởi vì có khi lại cần dùng
Dialogue: 0,0:03:03.75,0:03:06.25,Default,,0000,0000,0000,,với một tính năng mới khác trong tương lai.
Dialogue: 0,0:03:08.11,0:03:10.27,Default,,0000,0000,0000,,Còn một cách khác dùng CSS
Dialogue: 0,0:03:10.27,0:03:11.73,Default,,0000,0000,0000,,để tạo hình động,
Dialogue: 0,0:03:11.73,0:03:14.11,Default,,0000,0000,0000,,đó là thuộc tính transition.
Dialogue: 0,0:03:14.55,0:03:17.75,Default,,0000,0000,0000,,Thuộc tính này khiến trình duyệt chuyển đổi
Dialogue: 0,0:03:17.75,0:03:20.11,Default,,0000,0000,0000,,từ một giá trị thuộc tính ban đầu tới một giá trị khác.
Dialogue: 0,0:03:20.61,0:03:23.11,Default,,0000,0000,0000,,Ví dụ nếu ta muốn font-size 
Dialogue: 0,0:03:23.11,0:03:26.67,Default,,0000,0000,0000,,của số đếm giây kia to dần lên khi 
Dialogue: 0,0:03:26.67,0:03:28.35,Default,,0000,0000,0000,,người dùng di chuột vào số đó,
Dialogue: 0,0:03:28.35,0:03:30.19,Default,,0000,0000,0000,,ta có thể làm với JavaScript
Dialogue: 0,0:03:30.19,0:03:31.52,Default,,0000,0000,0000,,bằng cách tạo một event listener
Dialogue: 0,0:03:31.52,0:03:32.90,Default,,0000,0000,0000,,cho event mouse-over,
Dialogue: 0,0:03:32.90,0:03:34.54,Default,,0000,0000,0000,,rồi dùng requestAnimationFrame()
Dialogue: 0,0:03:34.54,0:03:37.10,Default,,0000,0000,0000,,để tăng font-size dần lên,\Nto increase the font
Dialogue: 0,0:03:37.10,0:03:41.95,Default,,0000,0000,0000,,nhưng ta cũng có thể làm thế chỉ với CSS thôi.
Dialogue: 0,0:03:41.95,0:03:42.82,Default,,0000,0000,0000,,Nghĩ xem nào.
Dialogue: 0,0:03:42.82,0:03:44.100,Default,,0000,0000,0000,,Thường thì ta làm sao để biến font-size
Dialogue: 0,0:03:44.100,0:03:48.37,Default,,0000,0000,0000,,thành to hơn khi di chuột mà chỉ dùng CSS?
Dialogue: 0,0:03:48.71,0:03:50.42,Default,,0000,0000,0000,,Ta có thể dùng hover.
Dialogue: 0,0:03:50.70,0:03:54.43,Default,,0000,0000,0000,,Ta viết #countdown:hover...
Dialogue: 0,0:03:54.43,0:03:59.26,Default,,0000,0000,0000,,rồi đến font-size:150px.
Dialogue: 0,0:03:59.94,0:04:02.70,Default,,0000,0000,0000,,
Dialogue: 0,0:04:02.70,0:04:06.42,Default,,0000,0000,0000,,
Dialogue: 0,0:04:06.42,0:04:08.93,Default,,0000,0000,0000,,cho biết quá trình chuyển đổi mất bao lâu,
Dialogue: 0,0:04:08.93,0:04:11.39,Default,,0000,0000,0000,,sử dụng hàm tính thời gian thế nào.
Dialogue: 0,0:04:11.39,0:04:16.39,Default,,0000,0000,0000,,Vậy ta viết transtion; font-size 1s linear;
Dialogue: 0,0:04:19.44,0:04:21.93,Default,,0000,0000,0000,,Giờ bạn hãy dừng video 
Dialogue: 0,0:04:21.93,0:04:25.29,Default,,0000,0000,0000,,và thử di chuột qua dòng chữ xem có gì không.
Dialogue: 0,0:04:25.83,0:04:28.73,Default,,0000,0000,0000,,Nếu bạn dùng Chrome, Firefox hoặc IE 10 trở lên,
Dialogue: 0,0:04:28.73,0:04:31.36,Default,,0000,0000,0000,,thì cỡ chữ sẽ to dần ra rất mượt,
Dialogue: 0,0:04:31.36,0:04:33.57,Default,,0000,0000,0000,,bạn không cần vendor prefix gì cả
Dialogue: 0,0:04:33.57,0:04:35.17,Default,,0000,0000,0000,,với kĩ thuật này.
Dialogue: 0,0:04:35.65,0:04:37.08,Default,,0000,0000,0000,,Còn rất nhiều thứ bạn có thể làm
Dialogue: 0,0:04:37.08,0:04:39.32,Default,,0000,0000,0000,,để tạo ảnh động bằng CSS,
Dialogue: 0,0:04:39.32,0:04:40.55,Default,,0000,0000,0000,,và các trình duyệt bây giờ cũng
Dialogue: 0,0:04:40.55,0:04:42.13,Default,,0000,0000,0000,,hỗ trợ những tính năng này khá tốt.
Dialogue: 0,0:04:42.13,0:04:43.56,Default,,0000,0000,0000,,Vậy nên tôi khuyến khích bạn nên tỉm hiểu 
Dialogue: 0,0:04:43.56,0:00:00.00,Default,,0000,0000,0000,,thật kĩ hơn về những tính năng này