CSS Animations

0
68
  • CSS animations cho phép tạo hoạt ảnh cho các phần tử mà không cần dùng Javascript hay Flash

Các thuộc tính:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

CSS Animations là gì?

  • CSS animations cho phép một phần tử dần dần thay đổi từ kiểu này sang kiểu khác.
  • Bạn có thể thay đổi bao nhiêu thuộc tính CSS bạn muốn, bao nhiêu lần bạn muốn.
  • Để sử dụng CSS animations, trước tiên bạn phải chỉ định một số khung hình chính cho hoạt ảnh.
  • Khung hình chính giữ kiểu dáng mà phần tử sẽ có tại một số thời điểm nhất định.

Quy tắc sử dụng @keyframes

  • Khi bạn chỉ định kiểu CSS bên trong @keyframes , hoạt ảnh sẽ dần dần thay đổi từ kiểu hiện tại sang kiểu mới tại một số thời điểm nhất định.
  • Để hoạt ảnh hoạt động, bạn phải liên kết hoạt ảnh với một phần tử.
  • Ví dụ sau liên kết hoạt ảnh “ví dụ” với phần tử <div>. Hoạt ảnh sẽ kéo dài trong 4 giây và nó sẽ dần dần thay đổi màu nền của phần tử <div> từ “đỏ” thành “vàng”:

Cú pháp:

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

Lưu ý:

  • Các thuộc tính animation-duaration sẽ xác định bao lâu thời gian một hình ảnh động cần thực hiện để hoàn thành. Nếu thuộc tính animation-duaration không được chỉ định, sẽ không có hoạt ảnh nào xảy ra, vì giá trị mặc định là 0s (0 giây). 
  • Trong ví dụ trên, chúng ta đã chỉ định khi nào kiểu sẽ thay đổi bằng cách sử dụng các từ khóa “from” và “to” (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).
  • Nó cũng có thể sử dụng phần trăm. Bằng cách sử dụng phần trăm, bạn có thể thêm bao nhiêu thay đổi kiểu tùy thích.

 

Delay an Animation.

  • Thuộc tính animation-delay chỉ định khoảng delay cho sự bắt đầu của 1 hoạt ảnh.
  • Ví dụ sau có độ trễ 2 giây trước khi bắt đầu hoạt ảnh:

Cú pháp:

div {
  width: 100px;
  height: 100px;
  background-color: red;   animation-duration: 4s;
  animation-delay: 2s;
}

Lưu ý:

  • Giá trị âm cũng được sử dụng. Nếu sử dụng các giá trị âm, ví dụ như -N giây, hoạt ảnh sẽ bắt đầu như thể nó đã được phát trong N giây.

Đặt số lần một hoạt ảnh sẽ chạy.

  • Thuộc tính animation-iteration-count quy định số lần hoạt ảnh sẽ chạy.
  • Ví dụ sau sẽ chạy hoạt ảnh 3 lần trước khi nó dừng:

Cú pháp:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Chạy hoạt ảnh theo hướng ngược lại hoặc chu kỳ.

  • Thuộc tính animation-direction chỉ định 1 hoạt ảnh nên chạy “thuận”, theo chiều ngược lại hay theo một chu kỳ.

Các giá trị của thuộc tịnh animation-direction:

  • normal – Hoạt ảnh chạy theo chiều thuận (Đây là mặc định).
  • reverse – Hoạt ảnh chạy theo chiều nghịch.
  • alternate – Hoạt ảnh chạy theo chiều thuận trước sau đó lại đi theo chiểu ngược lại.
  • alternate-reverse – Hoạt ảnh chạy theo chiều nghịch trước sau đó lại đi theo chiểu ngược lại.

Chỉ định tốc độ đường cong của hoạt ảnh

  • Thuộc tính animation-timing-function chỉ định tốc độ đường cong của hoạt ảnh.

Các giá trị của thuộc tính animation-timing-function:

  • ease – Chỉ định một hoạt ảnh có bắt đầu chậm, sau đó nhanh, sau đó kết thúc chậm (đây là mặc định)
  • linear – Chỉ định một hoạt ảnh có cùng tốc độ từ đầu đến cuối
  • ease-in – Chỉ định một hoạt ảnh có khởi động chậm
  • ease-out – Chỉ định một hoạt ảnh có kết thúc chậm
  • ease-in-out – Chỉ định một hoạt ảnh có bắt đầu và kết thúc chậm
  • cubic-bezier(n,n,n,n) – Cho phép bạn xác định các giá trị của riêng mình trong một hàm bậc ba
  • Ví dụ sau đây cho thấy một số đường cong tốc độ khác nhau có thể được sử dụng:

Cú pháp:

div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}

Chỉ định chế độ đổ màu cho hoạt ảnh.

  • CSS animations không ảnh hưởng đến một phần tử trước khi khung hình chính đầu tiên được phát hoặc sau khi khung hình chính cuối cùng được phát. Thuộc tính animation-fill-mode có thể ghi đè hành vi này.
  • Các thuộc tính animation-fill-modequy định  cho các phần tử mục tiêu khi các hình ảnh động không được chạy(trước khi nó bắt đầu, sau khi nó kết thúc, hoặc cả hai).

Thuộc tính animation-fill-mode có thể có các giá trị sau:

  • none– Giá trị mặc định. Hoạt ảnh sẽ không áp dụng bất kỳ kiểu nào cho phần tử trước hoặc sau khi nó đang thực thi
  • forwards – Phần tử sẽ giữ lại các giá trị kiểu được đặt bởi khung hình chính cuối cùng (phụ thuộc vào hướng hoạt ảnh và số lần lặp hoạt ảnh)
  • backwards – Phần tử sẽ nhận các giá trị kiểu được đặt bởi khung hình chính đầu tiên (phụ thuộc vào hướng hoạt ảnh) và giữ lại giá trị này trong khoảng thời gian trễ hoạt ảnh
  • both – Hoạt ảnh sẽ tuân theo các quy tắc cho cả tiến và lùi, mở rộng các thuộc tính hoạt ảnh theo cả hai hướng
  • Ví dụ sau cho phép phần tử <div> giữ lại các giá trị kiểu từ khung hình chính cuối cùng khi hoạt ảnh kết thúc:

Cú pháp:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

Thuộc tính viết tắt .

Cú pháp:

 div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

CSS Animation Properties(Thuộc tính).

Thuộc tínhGiải thích
@keyframes

Chỉ định mã hoạt ảnh

animation

Thuộc tính viết tắt để đặt tất cả các thuộc tính hoạt ảnh

animation-delayChỉ định thời gian trễ để bắt đầu hoạt ảnh
animation-directionChỉ định xem một hoạt ảnh sẽ được chạy thuận, nghịch hoặc theo các chu kỳ thay thế
animation-durationChỉ định thời gian hoạt ảnh phải mất để hoàn thành một chu kỳ
animation-fill-modeChỉ định kiểu cho phần tử khi hoạt ảnh không phát (trước khi bắt đầu, sau khi kết thúc hoặc cả hai)
animation-iteration-countChỉ định số lần một hoạt ảnh sẽ được phát
animation-nameChỉ định tên của hoạt ảnh @keyframes
animation-play-stateChỉ định hoạt ảnh đang chạy hay bị tạm dừng
animation-timing-function

Chỉ định đường cong tốc độ của hoạt ảnh

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây