Interested in learning CSS? Get my CSS Handbook

有興趣學習CSS嗎？ 獲取我的CSS手冊

介紹 (Introduction)

An animation is applied to an element using the animation property.

使用animation屬性將動畫應用于元素。

.container { animation: spin 10s linear infinite;}

spin is the name of the animation, which we need to define separately. We also tell CSS to make the animation last 10 seconds, perform it in a linear way (no acceleration or any difference in its speed), and to repeat it infinitely.

spin是動畫的名稱，我們需要單獨定義它。 我們還告訴CSS使動畫持續10秒，以線性方式執行動畫(無加速度或速度差異)，然后無限重復播放。

You must define how your animation works using keyframes. Here’s an example of an animation that rotates an item:

您必須使用關鍵幀 定義動畫的工作方式 。 這是旋轉項目的動畫的示例：

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

Inside the @keyframes definition you can have as many intermediate waypoints as you want.

在@keyframes定義中，您可以根據需要設置@keyframes多個中間航路點。

In this case, we instruct CSS to make the transform property to rotate the Z axis from 0 to 360 grades, completing the full loop.

在這種情況下，我們指示CSS使transform屬性將Z軸從0旋轉到360度，從而完成完整循環。

You can use any CSS transform here.

您可以在此處使用任何CSS轉換。

Notice how this does not dictate anything about the temporal interval the animation should take. This is defined when you use it via animation.

請注意，這如何不決定動畫應采用的時間間隔。 通過animation使用時定義。

CSS動畫示例 (A CSS Animations Example)

I want to draw four circles, all with a starting point in common, all 90 degrees distant from each other.

我想繪制四個圓，它們的起點都相同，并且彼此相距90度。

<div class="container">  <div class="circle one"></div>  <div class="circle two"></div>  <div class="circle three"></div>  <div class="circle four"></div></div>

body {  display: grid;  place-items: center;  height: 100vh;}

.circle { border-radius: 50%; left: calc(50% - 6.25em); top: calc(50% - 12.5em); transform-origin: 50% 12.5em; width: 12.5em; height: 12.5em; position: absolute; box-shadow: 0 1em 2em rgba(0, 0, 0, .5);}

.one,.three { background: rgba(142, 92, 205, .75);}

.two,.four { background: rgba(236, 252, 100, .75);}

.one { transform: rotateZ(0);}

.two { transform: rotateZ(90deg);}

.three { transform: rotateZ(180deg);}

.four { transform: rotateZ(-90deg);}

You can see them in this Glitch:

您可以在此故障中看到它們：

Let’s make this structure (all the circles together) rotate. To do this, we apply an animation on the container, and we define that animation as a 360 degrees rotation:

讓我們旋轉該結構(所有圓一起)。 為此，我們在容器上應用動畫，并將該動畫定義為360度旋轉：

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

.container { animation: spin 10s linear infinite;}

See it here:

在這里看到它：

You can add more keyframes to have funnier animations:

您可以添加更多關鍵幀來制作更有趣的動畫：

@keyframes spin { 0% {  transform: rotateZ(0); } 25% {  transform: rotateZ(30deg); } 50% {  transform: rotateZ(270deg); } 75% {  transform: rotateZ(180deg); } 100% {  transform: rotateZ(360deg); }}

See the example:

參見示例：

CSS動畫屬性 (The CSS animation properties)

CSS animations offers a lot of different parameters you can tweak:

CSS動畫提供了許多可以調整的不同參數：

• animation-name — the name of the animation which references an animation created using keyframes

  animation- name-引用使用關鍵幀創建的動畫的動畫的名稱

• animation-duration — how long the animation should last, in seconds

  animation-duration —動畫應持續多長時間，以秒為單位

• animation-timing-function — the timing function used by the animation (common values: linear, ease). Default: ease

  animation-timing-function —動畫使用的計時功能(常用值：線性，緩動)。 默認值：緩解

• animation-delay — optional number of seconds to wait before starting the animation

  animation-delay —開始動畫之前等待的可選秒數

• animation-iteration-count — how many times the animation should be performed. Expects a number, or infinite. Default: 1

  animation-iteration-count-動畫應執行多少次。 需要一個數字或無限。 默認值：1

• animation-direction — the direction of the animation. Can be normal, reverse, alternate or alternate-reverse. In the last 2, it alternates going forward and then backwards

  animation-direction —動畫的方向 。 可以是正向，反向，交替或反向交替。 在最后2個中，它交替向前和向后

• animation-fill-mode — defines how to style the element when the animation ends, after it finishes its iteration count number. None or backwards go back to the first keyframe styles. Forwards and both use the style that’s set in the last keyframe

  animation-fill-mode —定義動畫結束迭代計數后動畫結束時如何設置元素的樣式。 沒有或向后返回第一個關鍵幀樣式。 轉發，并且都使用上一個關鍵幀中設置的樣式

• animation-play-state — if set to paused, it pauses the animation. Default is running.

  animation-play-state(動畫播放狀態)—如果設置為“暫停”，它將暫停動畫。 默認正在運行。

The animation property is a shorthand for all these properties, in this order:

animation屬性是所有這些屬性的簡寫，順序如下：

.container {  animation: name             duration             timing-function             delay             iteration-count             direction             fill-mode             play-state;}

This is the example we used above:

這是我們上面使用的示例：

.container { animation: spin 10s linear infinite;}

CSS動畫JavaScript事件 (JavaScript events for CSS Animations)

Using JavaScript, you can listen for the following events:

使用JavaScript，您可以偵聽以下事件：

• animationstart

  animationstart

• animationend

  animationend

• animationiteration

  animationiteration

Be careful with animationstart, because if the animation starts on page load, your JavaScript code is always executed after the CSS has been processed. Then the animation will already be started and you cannot intercept the event.

請注意animationstart ，因為如果動畫是在頁面加載時開始的，則始終在處理完CSS之后執行JavaScript代碼。 然后，動畫將已經開始，并且您無法截獲該事件。

const container = document.querySelector('.container')container.addEventListener('animationstart', (e) => { //do something}, false)container.addEventListener('animationend', (e) => { //do something}, false)container.addEventListener('animationiteration', (e) => { //do something}, false)

Interested in learning CSS? Get my CSS Handbook

有興趣學習CSS嗎？ 獲取我的CSS手冊

翻譯自: https://www.freecodecamp.org/news/a-quick-introduction-to-css-animations-a1655375ec90/