CSS3 10 – CSS3 Animations

0
84

CSS3 Animations cho phép chúng ta tạo ra các hiệu ứng của các phần tử trong HTML mà không cần sử dụng Javascript và Flash

1. Giới thiệu về Animations 

Animaions cho phép một phần tử thay đổi từ phong cách này sang phong cách khác trong một thời gian nhất định.

Có thể thay đổi nhiều thuộc tính CSS mà bạn muốn

Để sự dụng CSS3 Animations thì điều đầu tiên bạn phải làm là chỉ định khung hình chính cho từng chuyển động.
Các khung hình này chứa các chìa khóa mà phần tử sẽ có trong khoảng thời gian nhất định.

2. Tạo Animation mới

Để tạo một cái Animations thì chúng ta sử dụng quy tắc @keyframes

Cú pháp

Ví dụ tôi muốn tạo một cái hiệu ứng đổi màu cho chữ chẳng hạn

See the Pen PKEpqe by Cao Anh Nhất (@xeko995) on CodePen.dark

Ngoài ra chúng ta có thể sử dụng % để thêm các thay đổi CSS trong nhiều khoảng thời gian khác nhau.

Cú pháp

3. Các thuộc tính trong Animations

Ở trên chúng ta chỉ mới tạo ra các Animations thôi muốn nó hoạt động được thì chúng ta phải sử dụng các thuộc tính Animations mà CSS3 cung cấp cho chúng ta

3.1. animation-name

Để sự dụng các cái chuyển động mà chúng ta tạo ra thì điều việc đầu tiên chúng ta phải làm là gọi tên chuyển động đó vào phần tử chúng ta muốn nó có các chuyển động.

Để gọi chuyển động vào phần tử chúng ta sử dụng thuộc tính animation-name

Cú pháp

Ví dụ tôi sẽ gọi tên cái animations là “doimauchu” mà tôi đã tạo ra ở ví dụ trên

See the Pen wqpJgQ by Cao Anh Nhất (@xeko995) on CodePen.dark

Chúng ta vẫn chưa thấy thay đổi gì so với lúc đầu phải không.
Để có thể nhìn thấy chuyển động thì chúng ta phải thiết lập thời gian chuyển động cho nó.

3.2. animation-duration

Để thiết lập thời gian chuyển động cho một cái animation thì chúng ta sử dụng thuộc tính animation-duration với giá trị truyền vào là thời gian thực hiện chuyển động , kí hiệu = s.

Ví dụ tôi muốn thiết đặt thời gian chuyển động trong vòng 3s cho cái ví dụ trên

See the Pen dzJvRV by Cao Anh Nhất (@xeko995) on CodePen.dark

*Note: 2 thuộc tính animation-nameanimation-duration  bắt buộc phải có nếu muốn sự dụng animations.

3.3. animation-delay

animation-delay là thuộc tính cho phép chúng ta tạo ra đặt thời gian bắt đầu thực thi hành động sau khi tải trang web xong hoặc có người dùng có tương tác với phần tử html

Ví dụ sau khi tải trang web xong thì 4s sau mới bắt đầu thực thi animations

See the Pen RZxVEw by Cao Anh Nhất (@xeko995) on CodePen.dark

3.4. animation-iteration-count

Mặc định các animation sẽ thực hiện chuyển động trong 1 lần duy nhất. Để có thể lặp lại các chuyển động chúng ta sự dụng thuộc tính animation-iteration-count , giá trị truyền vào thuộc tính là số lần muốn lặp lại chuyển động. Nếu muốn cho chuyển động lặp lại không giới hạn chúng ta truyền vào giá trị là ‘infinite‘.

Ví dụ tôi sẽ cho chuyển động ở ví dụ trên lặp lại 4 lần

See the Pen zdpwVm by Cao Anh Nhất (@xeko995) on CodePen.dark

3.5. animation-direction

animation-direction  cho phép chúng ta đặt chu kỳ chuyển động của một phần tử. Các giá trị của animation-direction bao gồm

  • reverse : Chuyển động theo hướng ngược lại
  • alternate: Chuyển động theo hướng đặt trước, sau đó quay ngược lại.

Ví dụ tôi sẽ cho khối của chúng ta chuyển động theo chu kỳ alternate

See the Pen zdpwVm by Cao Anh Nhất (@xeko995) on CodePen.dark

3.6. animation-timing-function

animation-timing-function cho phép chúng ta điều chỉnh tốc độ chuyển động của một phần từ

Các giá trị truyền vào bao gồm

  • ease: Tốc độ bạn đầu chậm sau đó nhanh và kết thúc từ từ
  • linear: Tốc độ từ từ khi bắt đầu đến kết thúc
  • ease-in: Tốc độ ban đầu chậm
  • ease-out: Tốc độ kết thúc chậm
  • ease-in-out: Tốc độ ban đầu và kết thúc chậm
  • cubic-bezier(n,n,n,n): Thiết đặt giá trị tùy ý cho tốc độ

Ví dụ

See the Pen PKEjyJ by Cao Anh Nhất (@xeko995) on CodePen.dark

4. Thuộc tính rút gọn animation

Nhằm giảm thiểu tối đa các dòng code thì CSS cung cấp cho chúng ta một thuộc tính rút gọn animations.

Cú pháp

Các giá trị được truyền vào lần lượt theo thứ tự từ trên xuống. Bắt buộc phải có 2 giá trị đầu tiên các giá trị thứ 3 trở đi nếu không có có thể bỏ qua.

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

 

 

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here