Lệnh @keyframes

Lệnh @keyframes định nghĩa các khung hình chính cho hoạt ảnh. Một khung hình chính đại diện cho các thuộc tính khác nhau của phần tử CSS của chúng ta, ví dụ, vị trí, kích thước, màu sắc và các thuộc tính khác, được áp dụng cho phần tử tại thời điểm được chỉ định.

Cú pháp

css@keyframes tên-hoạt-ảnh {
  các-khung-hình-chính
}

Ví dụ

Định nghĩa các khung hình chính:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: anim 3s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Ví dụ

Bây giờ hãy di chuyển hình vuông của chúng ta từ trên xuống dưới bằng hoạt ảnh:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-top: 0%;
  }
  to {
    margin-top: 10%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Ví dụ

Hãy tăng chiều rộng của hình của chúng ta bằng hoạt ảnh, thiết lập các điểm khóa bằng phần trăm:

html<div id="elem"></div>

css@keyframes anim {
  from {
    width: 10%;
  }
  to {
    width: 40%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Ví dụ

Bây giờ hãy thay đổi độ trong suốt của hình của chúng ta:

html<div id="elem"></div>

css@keyframes anim {
  from {
    background-color: #467CBC;
  }
  to {
    background-color: #C2DDFD;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Xem thêm