animation-name

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Thuộc tính animation-name trong CSS chỉ định tên của một hoặc nhiều quy tắc at-rule @keyframes mô tả hoạt ảnh cần áp dụng cho phần tử. Nhiều quy tắc at-rule @keyframes được chỉ định dưới dạng danh sách tên phân cách bằng dấu phẩy. Nếu tên được chỉ định không khớp với bất kỳ quy tắc at-rule @keyframes nào, sẽ không có thuộc tính nào được tạo hoạt ảnh.

Thường tiện lợi khi sử dụng thuộc tính viết tắt animation để đặt tất cả các thuộc tính hoạt ảnh cùng một lúc.

Try it

animation-name: none;

animation-name: slide;

animation-name: bounce;

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
</section>

#example-element {
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

@keyframes bounce {
  from {
    background-color: orange;
    color: black;
    margin-top: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-top: 40%;
  }
}

Cú pháp

css

/* Không có hoạt ảnh */
animation-name: none;

/* Một hoạt ảnh */
animation-name: test_05;
animation-name: -specific;
animation-name: "sliding-vertically";

/* Nhiều hoạt ảnh */
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;

/* Giá trị toàn cục */
animation-name: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
animation-name: unset;

Giá trị

none: Từ khóa đặc biệt biểu thị không có keyframe. Có thể dùng để tắt hoạt ảnh mà không thay đổi thứ tự của các định danh khác, hoặc để vô hiệu hóa các hoạt ảnh đến từ cascade.
<custom-ident>: Tên không được đặt trong dấu ngoặc kép để xác định hoạt ảnh. Định danh này được tạo thành từ sự kết hợp của các chữ cái phân biệt hoa thường a đến z, số 0 đến 9, dấu gạch dưới (_), và/hoặc dấu gạch ngang (-). Ký tự đầu tiên không phải dấu gạch ngang phải là chữ cái. Ngoài ra, không được có hai dấu gạch ngang ở đầu định danh. Hơn nữa, định danh không được là none, unset, initial, hoặc inherit.
<string>: Một chuỗi ký tự tuân theo các quy tắc giống như định danh tùy chỉnh, như mô tả ở trên, ngoại trừ chúng được bao quanh bởi dấu ngoặc kép (") hoặc dấu nháy đơn ('). Nếu dùng chuỗi có dấu ngoặc kép cho cả animation-name và tên quy tắc at-rule @keyframes tương ứng, none, các từ khóa toàn cục, và tên bắt đầu bằng dấu gạch dưới hoặc hai dấu gạch ngang đều hợp lệ, dù không được khuyến khích.

Note: Khi bạn chỉ định nhiều giá trị phân cách bằng dấu phẩy trên một thuộc tính animation-*, chúng được áp dụng cho các hoạt ảnh theo thứ tự xuất hiện của animation-name. Đối với các trường hợp số lượng hoạt ảnh và giá trị thuộc tính animation-* không khớp, hãy xem Đặt nhiều giá trị thuộc tính hoạt ảnh.

Định nghĩa hình thức

Initial value	`none`
Applies to	all elements, `::before` and `::after` pseudo-elements
Inherited	no
Computed value	as specified
Animation type	Not animatable

Cú pháp hình thức

animation-name = 
  [ none | <keyframes-name> ]#  

<keyframes-name> = 
  <custom-ident>  |
  <string>

Ví dụ

Đặt tên cho hoạt ảnh

Hoạt ảnh này có animation-name là rotate.

HTML

html

<div class="box"></div>

CSS

css

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}