Hướng dẫn animation support css - hỗ trợ hoạt hình css

• Trang chủ
• Tham khảo
• CSS
• CSS3
• Thuộc tính animation

Định nghĩa và sử dụng

Thuộc tính animation xác định một chuyển động của một tag hay một hình ảnh, là sự tổng hợp của các thuộc tính: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.

Cấu trúc

tag {
    animation: giá trị;
    -moz-animation: giá trị;
    -webkit-animation: giá trị;
    -o-animation: giá trị;
}

Trong đó:

• -moz-animation hỗ trợ cho firefox.
• -webkit-animation hỗ trợ cho Google Chrome và Safari.
• -o-animation hỗ trợ cho Opera.

Thuộc tính của animation trong css3:

Xác định số lần thực hiện chuyển động.

Animation

infinite

p {
    border: 1px solid red;
    text-align: center;
    width: 100px;
}

animation-iteration-count: infinite;

infinite

p {
    border: 1px solid red;
    text-align: center;
    width: 100px;
    position: relative;
    animation: myAnimation 5s ease-out infinite;
    -moz-animation: myAnimation 5s ease-out infinite;
    -webkit-animation: myAnimation 5s ease-out infinite;
    -o-animation: myAnimation 5s ease-out infinite;
}

@keyframes myAnimation {
    from {left: 0px;}
    to {left: 200px;}
}

/* Hien thi cho Firefox */
@-moz-keyframes myAnimation {
    from {left: 0px;}
    to {left: 200px;}
}

/* Hien thi cho Safari and Chrome */
@-webkit-keyframes myAnimation {
    from {left: 0px;}
    to {left: 200px;}
}

/* Hien thi cho Opera */
@-o-keyframes myAnimation {
    from {left: 0px;}
    to {left: 200px;}
}

animation-iteration-count: infinite;

Hoạt hình CSS

CSS cho phép hoạt hình của các phần tử HTML mà không cần sử dụng JavaScript hoặc Flash!

CSS

Trong chương này, bạn sẽ tìm hiểu về các thuộc tính sau:

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction

• 
  
  
  Animation
  
  

  0

• 
  
  
  Animation
  
  

  1

• 
  
  
  Animation
  
  

  2

Hỗ trợ trình duyệt cho hoạt hình

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Hoạt hình CSS là gì?

Một hình ảnh động cho phép một yếu tố dần dần thay đổi từ phong cách này sang kiểu khác.

Bạn có thể thay đổi khi nhiều thuộc tính CSS bạn muốn, nhiều lần tùy thích.

Để sử dụng hoạt hình CSS, trước tiên bạn phải chỉ định một số khung chính cho hình ảnh động.

KeyFrames giữ những kiểu mà phần tử sẽ có vào những thời điểm nhất định.

Quy tắc @KeyFrames

Khi bạn chỉ định các kiểu CSS bên trong quy tắc @keyframes, hình ảnh động sẽ dần thay đổi từ phong cách hiện tại sang kiểu mới tại một số thời điểm nhất định.

Để có được một hình ảnh động để hoạt động, bạn phải liên kết hoạt hình với một yếu tố.

Ví dụ sau đây liên kết hoạt hình "ví dụ" với phần tử. Hoạt hì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ử từ "đỏ" thành "vàng":

Thí dụ

/ * Mã hoạt hình */ @KeyFrames Ví dụ {& nbsp; & nbsp; từ {nền màu: màu đỏ;} & nbsp; đến {màu nền: màu vàng;}}
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/ * Phần tử để áp dụng hình ảnh động cho */ div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; màu nền: màu đỏ; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; }
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Hãy tự mình thử »

Lưu ý: Thuộc tính animation-duration xác định thời gian hoạt hình sẽ mất bao lâu để hoàn thành. Nếu thuộc tính animation-duration không được chỉ định, sẽ không có hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP; The animation-duration property defines how long an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0s (0 seconds). 

Trong ví dụ trên, chúng tôi đã chỉ định khi kiểu sẽ thay đổi bằng cách sử dụng các từ khóa "từ" và "đến" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).

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 nhiều thay đổi kiểu tùy thích.

Ví dụ sau đây sẽ thay đổi màu nền của phần tử khi hình ảnh động hoàn thành 25%, hoàn thành 50% và một lần nữa khi hoạt hình hoàn thành 100%:

Thí dụ

/ * Mã hoạt hình */ @KeyFrames Ví dụ {& nbsp; & nbsp; từ {nền màu: màu đỏ;} & nbsp; đến {màu nền: màu vàng;}}
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/ * Phần tử để áp dụng hình ảnh động cho */ div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; màu nền: màu đỏ; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; }
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Hãy tự mình thử »

Lưu ý: Thuộc tính animation-duration xác định thời gian hoạt hình sẽ mất bao lâu để hoàn thành. Nếu thuộc tính animation-duration không được chỉ định, sẽ không có hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP;

Thí dụ

/ * Mã hoạt hình */ @KeyFrames Ví dụ {& nbsp; & nbsp; từ {nền màu: màu đỏ;} & nbsp; đến {màu nền: màu vàng;}}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/ * Phần tử để áp dụng hình ảnh động cho */ div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; màu nền: màu đỏ; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; }
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Hãy tự mình thử »

Lưu ý: Thuộc tính animation-duration xác định thời gian hoạt hình sẽ mất bao lâu để hoàn thành. Nếu thuộc tính animation-duration không được chỉ định, sẽ không có hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP;

Trong ví dụ trên, chúng tôi đã chỉ định khi kiểu sẽ thay đổi bằng cách sử dụng các từ khóa "từ" và "đến" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).

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 nhiều thay đổi kiểu tùy thích.

Thí dụ

/ * Mã hoạt hình */ @KeyFrames Ví dụ {& nbsp; & nbsp; từ {nền màu: màu đỏ;} & nbsp; đến {màu nền: màu vàng;}}
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Hãy tự mình thử »

Lưu ý: Thuộc tính animation-duration xác định thời gian hoạt hình sẽ mất bao lâu để hoàn thành. Nếu thuộc tính animation-duration không được chỉ định, sẽ không có hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP;

Trong ví dụ trên, chúng tôi đã chỉ định khi kiểu sẽ thay đổi bằng cách sử dụng các từ khóa "từ" và "đến" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).

Thí dụ

/ * Mã hoạt hình */ @KeyFrames Ví dụ {& nbsp; & nbsp; từ {nền màu: màu đỏ;} & nbsp; đến {màu nền: màu vàng;}}
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Hãy tự mình thử »

Đặt số lần hoạt hình nên chạy

Thuộc tính animation-iteration-count chỉ định số lần một hình ảnh động sẽ chạy.

Ví dụ sau đây sẽ chạy hoạt hình 3 lần trước khi nó dừng lại:

Thí dụ

div {& nbsp; & nbsp; width: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị "vô hạn" để làm cho hoạt hình tiếp tục mãi mãi:

Thí dụ

div {& nbsp; & nbsp; width: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị "vô hạn" để làm cho hoạt hình tiếp tục mãi mãi:

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;}

Chạy hoạt hình theo hướng ngược hoặc chu kỳ thay thế

• Thuộc tính animation-direction chỉ định xem một hình ảnh động nên được phát về phía trước, ngược hoặc trong các chu kỳ thay thế.
• Thuộc tính hướng hoạt hình có thể có các giá trị sau:

• 
  
  
  Animation
  
  

  9 - Hoạt hình được phát là bình thường (chuyển tiếp). Đây là mặc định

• p {
      border: 1px solid red;
      text-align: center;
      width: 100px;
  }

  0 - Hoạt hình được phát theo hướng ngược (ngược)

________ 21- Hoạt hình được phát trước đầu tiên, sau đó ngược lại

Thí dụ

div {& nbsp; & nbsp; width: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị "vô hạn" để làm cho hoạt hình tiếp tục mãi mãi:

Thí dụ

div {& nbsp; & nbsp; width: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị "vô hạn" để làm cho hoạt hình tiếp tục mãi mãi:

Thí dụ

div {& nbsp; & nbsp; width: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị "vô hạn" để làm cho hoạt hình tiếp tục mãi mãi:

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;}

Chạy hoạt hình theo hướng ngược hoặc chu kỳ thay thế

• Thuộc tính animation-direction chỉ định xem một hình ảnh động nên được phát về phía trước, ngược hoặc trong các chu kỳ thay thế.
• Thuộc tính hướng hoạt hình có thể có các giá trị sau:

• 
  
  
  Animation
  
  

  9 - Hoạt hình được phát là bình thường (chuyển tiếp). Đây là mặc định

• p {
      border: 1px solid red;
      text-align: center;
      width: 100px;
  }

  0 - Hoạt hình được phát theo hướng ngược (ngược)
• ________ 21- Hoạt hình được phát trước đầu tiên, sau đó ngược lại

• p {
      border: 1px solid red;
      text-align: center;
      width: 100px;
  }

  2 - Hoạt hình được phát ngược trước, sau đó chuyển tiếp

Ví dụ sau đây sẽ chạy hoạt hình theo hướng ngược (ngược):

Thí dụ

div {& nbsp; & nbsp; width: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị "vô hạn" để làm cho hoạt hình tiếp tục mãi mãi:

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;}

Chạy hoạt hình theo hướng ngược hoặc chu kỳ thay thế

Thuộc tính animation-direction chỉ định xem một hình ảnh động nên được phát về phía trước, ngược hoặc trong các chu kỳ thay thế.

• Thuộc tính hướng hoạt hình có thể có các giá trị sau:

• 
  
  
  Animation
  
  

  9 - Hoạt hình được phát là bình thường (chuyển tiếp). Đây là mặc định

• p {
      border: 1px solid red;
      text-align: center;
      width: 100px;
  }

  0 - Hoạt hình được phát theo hướng ngược (ngược)
• ________ 21- Hoạt hình được phát trước đầu tiên, sau đó ngược lại

p {
    border: 1px solid red;
    text-align: center;
    width: 100px;
}

Thí dụ

div {& nbsp; & nbsp; width: 100px; & nbsp; & nbsp; chiều cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Hãy tự mình thử »

Ví dụ sau cho phép phần tử nhận được các giá trị kiểu được đặt bởi khung hình đầu tiên trước khi hình ảnh động bắt đầu (trong giai đoạn triệt để hoạt hình):

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Bối cảnh: đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên hoạt hình: Ví dụ; & nbsp; Thời gian hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; & nbsp; chế độ hoạt hình-fill: lùi; }
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Hãy tự mình thử »

Ví dụ sau cho phép phần tử nhận được các giá trị kiểu được đặt bởi khung hình đầu tiên trước khi hoạt hình bắt đầu và giữ lại các giá trị kiểu từ khung khóa cuối cùng khi hình ảnh động kết thúc:

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Bối cảnh: đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên hoạt hình: Ví dụ; & nbsp; Thời gian hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; & nbsp; chế độ hoạt hình-fill: lùi; }
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Hãy tự mình thử »

Ví dụ sau cho phép phần tử nhận được các giá trị kiểu được đặt bởi khung hình đầu tiên trước khi hoạt hình bắt đầu và giữ lại các giá trị kiểu từ khung khóa cuối cùng khi hình ảnh động kết thúc:

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; & nbsp; nền: màu đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên hoạt hình: Ví dụ; & nbsp; Thời gian hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; chế độ hoạt hình-fill: cả hai; }

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Bối cảnh: đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên hoạt hình: Ví dụ; & nbsp; Thời gian hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; & nbsp; chế độ hoạt hình-fill: lùi; }
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Hãy tự mình thử »

Ví dụ sau cho phép phần tử nhận được các giá trị kiểu được đặt bởi khung hình đầu tiên trước khi hoạt hình bắt đầu và giữ lại các giá trị kiểu từ khung khóa cuối cùng khi hình ảnh động kết thúc:

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Bối cảnh: đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên hoạt hình: Ví dụ; & nbsp; Thời gian hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; & nbsp; chế độ hoạt hình-fill: lùi; }
  animation: example 5s linear 2s infinite alternate;
}

Hãy tự mình thử »

Ví dụ sau cho phép phần tử nhận được các giá trị kiểu được đặt bởi khung hình đầu tiên trước khi hoạt hình bắt đầu và giữ lại các giá trị kiểu từ khung khóa cuối cùng khi hình ảnh động kết thúc:

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; & nbsp; nền: màu đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên hoạt hình: Ví dụ; & nbsp; Thời gian hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; chế độ hoạt hình-fill: cả hai; }

Animation