Hướng dẫn should you use css animations? - bạn có nên sử dụng hình ảnh động css không?

Question

Hoạt hình CSS giúp có thể làm động các chuyển tiếp từ cấu hình kiểu CSS này sang cấu hình kiểu CSS khác. Hoạt hình bao gồm hai thành phần, một kiểu mô tả hình ảnh động CSS và một bộ các khung chính biểu thị trạng thái bắt đầu và kết thúc của phong cách hoạt hình, cũng như các điểm trung gian có thể. make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

Nội dung chính Show

Định cấu hình một hình ảnh động
Xác định trình tự hoạt hình bằng cách sử dụng các khung chính
Sử dụng tốc ký hoạt hình
Đặt nhiều giá trị thuộc tính hoạt hình
Tạo văn bản trượt trên cửa sổ trình duyệt
Thêm một khung hình khóa khác
Thêm một khung hình khóa khác
Điều này cho biết trình duyệt rằng 75% con đường thông qua chuỗi hoạt hình, tiêu đề phải có biên độ bên trái ở mức 25% và chiều rộng phải là 150%.
Làm cho hoạt hình di chuyển qua lại
Hoạt hình CSS có ảnh hưởng đến hiệu suất không?
Tôi có nên thêm hoạt hình vào trang web của mình không?
Hoạt hình CSS có khó không?
Hoạt hình CSS có sử dụng GPU không?

Có ba lợi thế chính cho hoạt hình CSS so với các kỹ thuật hoạt hình dựa trên kịch bản truyền thống:

Chúng dễ sử dụng cho các hình ảnh động đơn giản; Bạn có thể tạo chúng mà không cần phải biết JavaScript.
Các hình ảnh động chạy tốt, ngay cả dưới tải hệ thống vừa phải. Hoạt hình đơn giản thường có thể thực hiện kém trong JavaScript. Công cụ kết xuất có thể sử dụng các kỹ thuật trượt khung và các kỹ thuật khác để giữ cho hiệu suất suôn sẻ nhất có thể.
Cho phép trình duyệt kiểm soát chuỗi hoạt hình cho phép trình duyệt tối ưu hóa hiệu suất và hiệu quả bằng cách giảm tần suất cập nhật của các hình ảnh động chạy trong các tab hiện không hiển thị.

Định cấu hình một hình ảnh động

Để tạo chuỗi hoạt hình CSS, bạn tạo kiểu cho yếu tố bạn muốn làm động với thuộc tính

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0 hoặc các tài sản phụ của nó. Điều này cho phép bạn định cấu hình thời gian, thời lượng và các chi tiết khác về cách trình tự hoạt hình sẽ tiến triển. Điều này không cấu hình sự xuất hiện thực tế của hình ảnh động, được thực hiện bằng cách sử dụng quy tắc

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1 như được mô tả trong phần Xác định chuỗi hoạt hình bằng cách sử dụng phần KeyFrames bên dưới.not configure the actual appearance of the animation, which is done using the

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1 at-rule as described in the Defining the animation sequence using keyframes section below.

Các sản phẩm phụ của thuộc tính

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0 là:

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

3

Chỉ định độ trễ giữa tải phần tử và bắt đầu một chuỗi hoạt hình và liệu hoạt hình có nên bắt đầu ngay từ khi bắt đầu hoặc một phần thông qua hoạt hình hay không.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

4

Chỉ định xem lần lặp đầu tiên của hoạt hình nên được chuyển tiếp hay lùi và liệu các lần lặp tiếp theo có nên thay thế hướng trên mỗi lần chạy qua chuỗi hay đặt lại về điểm bắt đầu và lặp lại.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5

Chỉ định khoảng thời gian mà một hình ảnh động hoàn thành một chu kỳ.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

6

Chỉ định cách một hình ảnh động áp dụng các kiểu cho mục tiêu của nó trước và sau khi nó chạy.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

7

Chỉ định số lần một hình ảnh động nên lặp lại.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

8

Chỉ định tên của quy tắc

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1 mô tả các khung hình hoạt hình.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

0

Chỉ định có nên tạm dừng hoặc phát một chuỗi hoạt hình.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

1

Chỉ định cách chuyển đổi hoạt hình qua các khung chính bằng cách thiết lập các đường cong gia tốc.

Xác định trình tự hoạt hình bằng cách sử dụng các khung chính

Sau khi bạn đã cấu hình thời gian của hoạt hình, bạn cần xác định sự xuất hiện của hoạt hình. Điều này được thực hiện bằng cách thiết lập một hoặc nhiều khung chính bằng cách sử dụng quy tắc

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1. Mỗi KeyFrame mô tả cách phần tử hoạt hình sẽ kết xuất tại một thời điểm nhất định trong chuỗi hoạt hình.

Vì thời gian của hình ảnh động được xác định theo kiểu CSS cấu hình hoạt hình, các khung hình Keyfames sử dụng

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

3 để chỉ ra thời gian trong chuỗi hoạt hình mà chúng diễn ra. 0% chỉ ra khoảnh khắc đầu tiên của chuỗi hoạt hình, trong khi 100% cho biết trạng thái cuối cùng của hình ảnh động. Bởi vì hai lần này rất quan trọng, chúng có bí danh đặc biệt:

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

4 và

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

5. Cả hai đều là tùy chọn. Nếu ________ 34/________ 37 hoặc ________ 35/________ 39 không được chỉ định, trình duyệt sẽ bắt đầu hoặc hoàn thành hình ảnh động bằng cách sử dụng các giá trị được tính toán của tất cả các thuộc tính.

Bạn có thể tùy chọn bao gồm các khung khóa bổ sung mô tả các bước trung gian giữa bắt đầu và kết thúc hoạt hình.

Sử dụng tốc ký hoạt hình

Nhập giá

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0 rất hữu ích cho việc tiết kiệm không gian. Ví dụ, một số quy tắc chúng tôi đã sử dụng thông qua bài viết này:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

... có thể được thay thế bằng cách sử dụng tốc ký

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0.

p {
  animation: 3s infinite alternate slidein;
}

Để tìm hiểu thêm về chuỗi trong đó các giá trị thuộc tính hoạt hình khác nhau có thể được chỉ định bằng cách sử dụng tốc ký

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0, hãy xem trang tham chiếu

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

0.

Đặt nhiều giá trị thuộc tính hoạt hình

Các thuộc tính Longhand hoạt hình CSS có thể chấp nhận nhiều giá trị, được phân tách bằng dấu phẩy. Tính năng này có thể được sử dụng khi bạn muốn áp dụng nhiều hình ảnh động trong một quy tắc và đặt các thời lượng khác nhau, số lần lặp, v.v., cho mỗi hình ảnh động. Hãy xem xét một số ví dụ nhanh để giải thích các hoán vị khác nhau.

Trong ví dụ đầu tiên này, có ba giá trị đếm thời lượng và ba lần lặp. Vì vậy, mỗi hình ảnh động được gán một giá trị thời lượng và số lần lặp với cùng vị trí với tên hoạt hình. Hoạt hình

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

4 được gán thời lượng

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

5 và số lần lặp là

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

6 và hoạt hình

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

7 được gán thời lượng

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

8 và số lần lặp là

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

9.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Trong ví dụ thứ hai này, ba tên hoạt hình được đặt, nhưng chỉ có một thời lượng và số lần lặp. Trong trường hợp này, cả ba hình ảnh động được cung cấp cùng một thời lượng và số lần lặp.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

Trong ví dụ thứ ba này, ba hình ảnh động được chỉ định, nhưng chỉ có hai thời lượng và số lần lặp. Trong những trường hợp như vậy không có đủ giá trị trong danh sách để gán một cái riêng cho mỗi hình ảnh động, các chu kỳ gán giá trị từ mục thứ nhất đến mục cuối cùng trong danh sách có sẵn và sau đó quay trở lại mục đầu tiên. Vì vậy,

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

4 có thời lượng

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

5 và

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

2 có thời lượng

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

3, đây là giá trị cuối cùng trong danh sách các giá trị thời lượng. Gán giá trị thời lượng hiện được đặt lại về giá trị đầu tiên;

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

7, do đó, có thời lượng

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

5. Các giá trị đếm lặp (và bất kỳ giá trị thuộc tính nào khác mà bạn chỉ định) sẽ được gán theo cùng một cách.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

Nếu sự không phù hợp về số lượng các giá trị thuộc tính hoạt hình và hoạt hình bị đảo ngược, hãy nói rằng có năm giá trị

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5 cho ba giá trị

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

8, thì các giá trị hoạt hình thêm hoặc không sử dụng, trong trường hợp này là hai giá trị

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5, không áp dụng cho bất kỳ hình ảnh động nào và bị bỏ qua.

Ví dụ

Lưu ý: Một số trình duyệt cũ hơn (trước năm 2017) có thể cần tiền tố; Các ví dụ trực tiếp bạn có thể nhấp để xem trong trình duyệt của mình bao gồm cú pháp có tiền tố

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

9. Some older browsers (pre-2017) may need prefixes; the live examples you can click to see in your browser include the

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

9 prefixed syntax.

Tạo văn bản trượt trên cửa sổ trình duyệt

Ví dụ đơn giản này tạo kiểu cho phần tử

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

0 để văn bản trượt từ ngoài cạnh bên phải của cửa sổ trình duyệt.

Lưu ý rằng các hình ảnh động như thế này có thể khiến trang trở nên rộng hơn cửa sổ trình duyệt. Để tránh vấn đề này, đặt phần tử được hoạt hình trong một container và đặt

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

1

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

2 trên container.

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Trong ví dụ này, kiểu cho phần tử

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

0 chỉ định rằng hình ảnh động sẽ mất 3 giây để thực hiện từ đầu đến cuối, sử dụng thuộc tính

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

5 và tên của

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1 xác định các khung chính cho chuỗi hoạt hình được đặt tên là "slidein ".

Nếu chúng tôi muốn bất kỳ kiểu dáng tùy chỉnh nào trên phần tử

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

0 xuất hiện trong các trình duyệt không hỗ trợ hoạt hình CSS, chúng tôi cũng sẽ đưa nó vào đây; Tuy nhiên, trong trường hợp này, chúng tôi không muốn bất kỳ kiểu dáng tùy chỉnh nào ngoài hiệu ứng hoạt hình.

Các khung chính được xác định bằng cách sử dụng quy tắc

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1. Trong trường hợp này, chúng tôi chỉ có hai khung chính. Lần đầu tiên xảy ra ở mức 0% (sử dụng bí danh

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

4). Ở đây, chúng tôi định cấu hình lề trái của phần tử ở mức 100% (nghĩa là ở cạnh bên phải của phần tử chứa) và chiều rộng của phần tử là 300% (hoặc ba lần chiều rộng của phần tử chứa phần tử chứa ). Điều này làm cho khung đầu tiên của hình ảnh động có tiêu đề được rút ra khỏi cạnh phải của cửa sổ trình duyệt.

Khung khóa thứ hai (và cuối cùng) xảy ra ở mức 100% (sử dụng bí danh

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

5). Biên độ bên trái được đặt thành 0% và chiều rộng của phần tử được đặt thành 100%. Điều này làm cho tiêu đề hoàn thành hoạt hình của nó chống lại cạnh trái của khu vực nội dung.

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Lưu ý: Tải lại trang để xem hình ảnh động. Reload page to see the animation.

Thêm một khung hình khóa khác

Hãy thêm một khung khóa khác vào hình ảnh động của ví dụ trước. Giả sử chúng tôi muốn kích thước phông chữ của tiêu đề tăng khi nó di chuyển từ phải sang trái một lúc, sau đó giảm trở lại kích thước ban đầu của nó. Điều đó đơn giản như thêm Khung khóa này:

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

Mã đầy đủ bây giờ trông như thế này:

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Điều này cho biết trình duyệt rằng 75% con đường thông qua chuỗi hoạt hình, tiêu đề phải có biên độ bên trái ở mức 25% và chiều rộng phải là 150%.

Lưu ý: Tải lại trang để xem hình ảnh động. Reload page to see the animation.

Thêm một khung hình khóa khác

Hãy thêm một khung khóa khác vào hình ảnh động của ví dụ trước. Giả sử chúng tôi muốn kích thước phông chữ của tiêu đề tăng khi nó di chuyển từ phải sang trái một lúc, sau đó giảm trở lại kích thước ban đầu của nó. Điều đó đơn giản như thêm Khung khóa này:

p {
  animation: 3s infinite alternate slidein;
}

0

Mã đầy đủ bây giờ trông như thế này:

p {
  animation: 3s infinite alternate slidein;
}

1

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Điều này cho biết trình duyệt rằng 75% con đường thông qua chuỗi hoạt hình, tiêu đề phải có biên độ bên trái ở mức 25% và chiều rộng phải là 150%.

Lặp lại hoạt hình

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Để làm cho hoạt hình lặp lại, hãy sử dụng thuộc tính

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

7 để cho biết số lần lặp lại hoạt hình. Trong trường hợp này, chúng ta hãy sử dụng

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

1 để có hình ảnh động lặp lại vô thời hạn:

Thêm nó vào mã hiện có:

<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
p>

Làm cho hoạt hình di chuyển qua lại

Điều đó làm cho nó lặp lại, nhưng thật kỳ lạ khi nó quay trở lại đầu mỗi khi nó bắt đầu hoạt hình. Những gì chúng tôi thực sự muốn là để nó di chuyển qua lại trên màn hình. Điều đó dễ dàng thực hiện bằng cách đặt

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

4 thành

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

3:

Chúng tôi sẽ sửa đổi ví dụ văn bản trượt để xuất một số thông tin về từng sự kiện hoạt hình khi nó xảy ra, vì vậy chúng tôi có thể xem xét cách chúng hoạt động.

Thêm CSS

Chúng tôi bắt đầu với việc tạo CSS cho hoạt hình. Hoạt hình này sẽ kéo dài trong 3 giây, được gọi là "slidein", lặp lại 3 lần và thay thế hướng mỗi lần. Trong

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

1, chiều rộng và lề trái được thao tác để làm cho phần tử trượt trên màn hình.

p {
  animation: 3s infinite alternate slidein;
}

6

Thêm người nghe sự kiện hoạt hình

Chúng tôi sẽ sử dụng mã JavaScript để nghe cả ba sự kiện hoạt hình có thể. Mã này cấu hình người nghe sự kiện của chúng tôi; Chúng tôi gọi nó khi tài liệu lần đầu tiên được tải để thiết lập mọi thứ.

p {
  animation: 3s infinite alternate slidein;
}

7

Đây là mã khá tiêu chuẩn; Bạn có thể nhận được chi tiết về cách nó hoạt động trong tài liệu cho

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

6. Điều cuối cùng mã này làm là đặt

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

7 trên phần tử mà chúng ta sẽ hoạt hình thành "slidein"; Chúng tôi làm điều này để bắt đầu hoạt hình.

Tại sao? Bởi vì sự kiện

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

8 bắn ngay khi hoạt hình bắt đầu và trong trường hợp của chúng tôi, điều đó xảy ra trước khi mã của chúng tôi chạy. Vì vậy, chúng ta sẽ tự bắt đầu hoạt hình bằng cách đặt lớp của yếu tố theo kiểu được hoạt hình sau thực tế.

Nhận các sự kiện

Các sự kiện được gửi đến hàm

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

9, được hiển thị bên dưới.

p {
  animation: 3s infinite alternate slidein;
}

8

Mã này cũng vậy, rất đơn giản. Nó xem xét

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

0 để xác định loại sự kiện hoạt hình nào xảy ra, sau đó thêm một ghi chú thích hợp cho

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

1 (danh sách không theo thứ tự) mà chúng tôi đang sử dụng để ghi lại các sự kiện này.

Đầu ra, khi tất cả được nói và thực hiện, trông giống như thế này:

Bắt đầu: Thời gian trôi qua là 0
Vòng lặp mới bắt đầu vào thời điểm 3.01200008392334
Vòng lặp mới bắt đầu vào thời điểm 6.00600004196167
Kết thúc: Thời gian trôi qua là 9.234000205993652

Lưu ý rằng thời gian rất gần, nhưng không chính xác, những người được mong đợi với thời gian được thiết lập khi hoạt hình được cấu hình. Cũng lưu ý rằng sau lần lặp cuối cùng của hoạt hình, sự kiện

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

2 không được gửi; Thay vào đó, sự kiện

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

3 được gửi.

Chỉ vì sự hoàn chỉnh, đây là HTML hiển thị nội dung trang, bao gồm cả danh sách mà tập lệnh chèn thông tin về các sự kiện nhận được:

p {
  animation: 3s infinite alternate slidein;
}

9

Và đây là đầu ra trực tiếp.

Lưu ý: Tải lại trang để xem hình ảnh động. Reload page to see the animation.

Xem thêm

Hoạt hình CSS có ảnh hưởng đến hiệu suất không?

So với các yếu tố hoạt hình sử dụng JavaScript, hình ảnh động CSS có thể dễ dàng hơn để tạo.Họ cũng có thể cung cấp hiệu suất tốt hơn, vì họ cung cấp cho trình duyệt kiểm soát nhiều hơn khi hiển thị khung và bỏ khung nếu cần thiết.They can also give better performance, as they give the browser more control over when to render frames, and to drop frames if necessary.

Tôi có nên thêm hoạt hình vào trang web của mình không?

Chúng không phải là thứ bạn thêm vào 'gia vị' thiết kế trang web của bạn.Trong khi họ làm điều đó, mục đích và vai trò của họ còn nhiều hơn thế.Bạn thấy đấy, hoạt hình cho người dùng biết thông tin chảy trên trang web của bạn như thế nào.Họ giúp khách truy cập của bạn hiểu rõ hơn về cách trang web của bạn hoạt động.animations show the user how information is flowing on your website. They help your visitors understand better how your website works.

Hoạt hình CSS có khó không?

Làm một hình ảnh động trong CSS không khó.Về cơ bản, chỉ có hai điều chúng ta cần làm: Xác định một số kiểu khác nhau bên trong quy tắc @KeyFrames.Kiểm soát cách các phong cách này sẽ được chơi với các thuộc tính CSS tương đối.not hard. Basically, there are just two things we need to do: Define some different styles inside the @keyframes rule. Control how these styles will be played with relative CSS properties.

Hoạt hình CSS có sử dụng GPU không?

Chúng ta đã biết rằng hoạt hình biến đổi và độ mờ thông qua các chuyển đổi CSS hoặc hoạt hình tự động tạo ra một lớp tổng hợp và hoạt động trên GPU.works on the GPU.

programming css CSS transition performance Text animation CSS Animation JS Web animation js Animate-CSS animation-iteration-count Hover animation CSS animation-duration

Hướng dẫn should you use css animations? - bạn có nên sử dụng hình ảnh động css không?

Định cấu hình một hình ảnh động

Xác định trình tự hoạt hình bằng cách sử dụng các khung chính

Sử dụng tốc ký hoạt hình

Đặt nhiều giá trị thuộc tính hoạt hình

Ví dụ

Tạo văn bản trượt trên cửa sổ trình duyệt

Thêm một khung hình khóa khác

Thêm một khung hình khóa khác

Điều này cho biết trình duyệt rằng 75% con đường thông qua chuỗi hoạt hình, tiêu đề phải có biên độ bên trái ở mức 25% và chiều rộng phải là 150%.

Làm cho hoạt hình di chuyển qua lại

Thêm CSS

Thêm người nghe sự kiện hoạt hình

Nhận các sự kiện

Xem thêm

Hoạt hình CSS có ảnh hưởng đến hiệu suất không?

Tôi có nên thêm hoạt hình vào trang web của mình không?

Hoạt hình CSS có khó không?

Hoạt hình CSS có sử dụng GPU không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội