Hoạt hình xoay vô hạn css codepen

Thuộc tính

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

7 trong CSS có thể được sử dụng để tạo hoạt ảnh cho nhiều thuộc tính CSS khác, chẳng hạn như

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

8,

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

9,

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

0 hoặc

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

1. Mỗi hoạt ảnh cần được xác định theo quy tắc

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

2, quy tắc này sau đó được gọi với thuộc tính

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

7, như vậy

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

Dự phòng nhúng CodePen

Mỗi quy tắc

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

2 xác định điều gì sẽ xảy ra tại những thời điểm cụ thể trong hoạt ảnh. Ví dụ: 0% là bắt đầu hoạt ảnh và 100% là kết thúc. Sau đó, các khung hình chính này có thể được kiểm soát bằng thuộc tính tốc ký

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

7 hoặc tám thuộc tính phụ của nó, để cung cấp nhiều quyền kiểm soát hơn đối với cách thao tác các khung hình chính đó

Thuộc tính phụ

• @keyframes stretch {
    /* declare animation actions here */
  }
  
  .element {
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
  }
  
  /*
    is the same as:
  */
  
  .element {
    animation: 
      stretch
      1.5s
      ease-out
      0s
      alternate
      infinite
      none
      running;
  }

  3. tuyên bố tên của quy tắc

  @keyframes stretch {
    /* declare animation actions here */
  }
  
  .element {
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
  }
  
  /*
    is the same as:
  */
  
  .element {
    animation: 
      stretch
      1.5s
      ease-out
      0s
      alternate
      infinite
      none
      running;
  }

  2 để thao tác

• @keyframes stretch {
    /* declare animation actions here */
  }
  
  .element {
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
  }
  
  /*
    is the same as:
  */
  
  .element {
    animation: 
      stretch
      1.5s
      ease-out
      0s
      alternate
      infinite
      none
      running;
  }

  5. khoảng thời gian cần thiết để một hình ảnh động hoàn thành một chu kỳ

• @keyframes stretch {
    /* declare animation actions here */
  }
  
  .element {
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
  }
  
  /*
    is the same as:
  */
  
  .element {
    animation: 
      stretch
      1.5s
      ease-out
      0s
      alternate
      infinite
      none
      running;
  }

  6. thiết lập các đường cong gia tốc đặt trước như

  @keyframes stretch {
    /* declare animation actions here */
  }
  
  .element {
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
  }
  
  /*
    is the same as:
  */
  
  .element {
    animation: 
      stretch
      1.5s
      ease-out
      0s
      alternate
      infinite
      none
      running;
  }

  7 hoặc

  @keyframes stretch {
    /* declare animation actions here */
  }
  
  .element {
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
  }
  
  /*
    is the same as:
  */
  
  .element {
    animation: 
      stretch
      1.5s
      ease-out
      0s
      alternate
      infinite
      none
      running;
  }

  8

• @keyframes stretch {
    /* declare animation actions here */
  }
  
  .element {
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
  }
  
  /*
    is the same as:
  */
  
  .element {
    animation: 
      stretch
      1.5s
      ease-out
      0s
      alternate
      infinite
      none
      running;
  }

  9. thời gian giữa phần tử được tải và bắt đầu chuỗi hoạt hình [ví dụ thú vị]

• @keyframes pulse {
    0%, 100% {
      background-color: yellow;
    }
    50% {
      background-color: red;
    }
  }

  0. đặt hướng của hoạt ảnh sau chu kỳ. Đặt lại mặc định của nó trên mỗi chu kỳ

• @keyframes pulse {
    0%, 100% {
      background-color: yellow;
    }
    50% {
      background-color: red;
    }
  }

  1. số lần hoạt ảnh nên được thực hiện

• @keyframes pulse {
    0%, 100% {
      background-color: yellow;
    }
    50% {
      background-color: red;
    }
  }

  2. đặt giá trị nào được áp dụng trước/sau hoạt ảnh.
  Ví dụ: bạn có thể đặt trạng thái cuối cùng của hoạt ảnh để duy trì trên màn hình hoặc bạn có thể đặt trạng thái đó để chuyển về trạng thái trước khi hoạt ảnh bắt đầu.

• @keyframes pulse {
    0%, 100% {
      background-color: yellow;
    }
    50% {
      background-color: red;
    }
  }

  3. tạm dừng/phát hoạt ảnh

Các thuộc tính phụ này sau đó có thể được sử dụng như vậy

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

Dự phòng nhúng CodePen

Dưới đây là danh sách đầy đủ các giá trị mà mỗi thuộc tính phụ này có thể nhận

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

6dễ dàng, dễ dàng ra, dễ dàng vào, dễ dàng ra, tuyến tính, khối-bezier[x1, y1, x2, y2] [e. g. khối-bezier[0. 5, 0. 2, 0. 3, 1. 0]]

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

5Xs hoặc Xms

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

9Xs hoặc Xms

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

1X

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

2tiến, lùi, cả hai, không

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

0bình thường, xen kẽ

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

3tạm dừng, chạy, chạy

Nhiều bước

Nếu một hoạt ảnh có cùng thuộc tính bắt đầu và kết thúc, sẽ hữu ích khi phân tách các giá trị 0% và 100% bằng dấu phẩy bên trong

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

2

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

Nhiều hình ảnh động

Bạn cũng có thể phân tách các giá trị bằng dấu phẩy để khai báo nhiều hoạt ảnh trên bộ chọn. Trong ví dụ bên dưới, chúng tôi muốn thay đổi màu của hình tròn trong một

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

02 đồng thời di chuyển nó từ bên này sang bên kia bằng một hình tròn khác

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

0

Dự phòng nhúng CodePen

Màn biểu diễn

Hoạt ảnh hầu hết các thuộc tính là mối quan tâm về hiệu suất, vì vậy chúng ta nên thận trọng trước khi tạo hoạt ảnh cho bất kỳ thuộc tính nào. Tuy nhiên, có một số kết hợp nhất định có thể được tạo hoạt ảnh một cách an toàn

• @keyframes stretch {
    /* declare animation actions here */
  }
  
  .element {
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
  }
  
  /*
    is the same as:
  */
  
  .element {
    animation: 
      stretch
      1.5s
      ease-out
      0s
      alternate
      infinite
      none
      running;
  }

  03

• @keyframes stretch {
    /* declare animation actions here */
  }
  
  .element {
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
  }
  
  /*
    is the same as:
  */
  
  .element {
    animation: 
      stretch
      1.5s
      ease-out
      0s
      alternate
      infinite
      none
      running;
  }

  04

• @keyframes stretch {
    /* declare animation actions here */
  }
  
  .element {
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
  }
  
  /*
    is the same as:
  */
  
  .element {
    animation: 
      stretch
      1.5s
      ease-out
      0s
      alternate
      infinite
      none
      running;
  }

  05

• @keyframes stretch {
    /* declare animation actions here */
  }
  
  .element {
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running; 
  }
  
  /*
    is the same as:
  */
  
  .element {
    animation: 
      stretch
      1.5s
      ease-out
      0s
      alternate
      infinite
      none
      running;
  }

  06

Những thuộc tính nào có thể được làm động?

MDN có một danh sách các thuộc tính CSS có thể được làm động. Thuộc tính hoạt hình có xu hướng màu sắc và số. Một ví dụ về thuộc tính không thể hoạt hình là

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

07

hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên