Interested in learning CSS? Get my CSS Handbook

有興趣學(xué)習(xí)CSS嗎？ 獲取我的CSS手冊

介紹 (Introduction)

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

使用animation屬性將動(dòng)畫應(yīng)用于元素。

.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是動(dòng)畫的名稱，我們需要單獨(dú)定義它。 我們還告訴CSS使動(dòng)畫持續(xù)10秒，以線性方式執(zhí)行動(dòng)畫(無加速度或速度差異)，然后無限重復(fù)播放。

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

您必須使用關(guān)鍵幀 定義動(dòng)畫的工作方式 。 這是旋轉(zhuǎn)項(xiàng)目的動(dòng)畫的示例：

@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定義中，您可以根據(jù)需要設(shè)置@keyframes多個(gè)中間航路點(diǎn)。

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旋轉(zhuǎn)到360度，從而完成完整循環(huán)。

You can use any CSS transform here.

您可以在此處使用任何CSS轉(zhuǎn)換。

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

請注意，這如何不決定動(dòng)畫應(yīng)采用的時(shí)間間隔。 通過animation使用時(shí)定義。

CSS動(dòng)畫示例 (A CSS Animations Example)

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

我想繪制四個(gè)圓，它們的起點(diǎn)都相同，并且彼此相距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:

讓我們旋轉(zhuǎn)該結(jié)構(gòu)(所有圓一起)。 為此，我們在容器上應(yīng)用動(dòng)畫，并將該動(dòng)畫定義為360度旋轉(zhuǎn)：

@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:

您可以添加更多關(guān)鍵幀來制作更有趣的動(dòng)畫：

@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動(dòng)畫屬性 (The CSS animation properties)

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

CSS動(dòng)畫提供了許多可以調(diào)整的不同參數(shù)：

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

  animation- name-引用使用關(guān)鍵幀創(chuàng)建的動(dòng)畫的動(dòng)畫的名稱

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

  animation-duration —動(dòng)畫應(yīng)持續(xù)多長時(shí)間，以秒為單位

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

  animation-timing-function —動(dòng)畫使用的計(jì)時(shí)功能(常用值：線性，緩動(dòng))。 默認(rèn)值：緩解

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

  animation-delay —開始動(dòng)畫之前等待的可選秒數(shù)

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

  animation-iteration-count-動(dòng)畫應(yīng)執(zhí)行多少次。 需要一個(gè)數(shù)字或無限。 默認(rèn)值：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 —?jiǎng)赢嫷姆较?/strong> 。 可以是正向，反向，交替或反向交替。 在最后2個(gè)中，它交替向前和向后

• 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 —定義動(dòng)畫結(jié)束迭代計(jì)數(shù)后動(dòng)畫結(jié)束時(shí)如何設(shè)置元素的樣式。 沒有或向后返回第一個(gè)關(guān)鍵幀樣式。 轉(zhuǎn)發(fā)，并且都使用上一個(gè)關(guān)鍵幀中設(shè)置的樣式

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

  animation-play-state(動(dòng)畫播放狀態(tài))—如果設(shè)置為“暫停”，它將暫停動(dòng)畫。 默認(rèn)正在運(yùn)行。

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動(dòng)畫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 ，因?yàn)槿绻麆?dòng)畫是在頁面加載時(shí)開始的，則始終在處理完CSS之后執(zhí)行JavaScript代碼。 然后，動(dòng)畫將已經(jīng)開始，并且您無法截獲該事件。

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

有興趣學(xué)習(xí)CSS嗎？ 獲取我的CSS手冊

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

總結(jié)

以上是生活随笔為你收集整理的CSS动画快速介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。