web動畫

by CodeDraken

由CodeDraken

Web動畫簡介 (An Introduction to Web Animations)

In this introduction to web animations article, we will cover basic CSS animations using pseudo-classes, transitions, and transformations.

在此Web動畫簡介中，我們將介紹使用偽類，過渡和轉換的基本CSS動畫。

If you’re unsure why you should use CSS animations then take a look at these articles.

如果不確定為什么要使用CSS動畫，請閱讀這些文章。

Some basic ( and very ugly (for now) ) example code for this article will be on CodePen:

本文的一些基本(現在非常難看)示例代碼將在CodePen上發布：

已觸發 (Triggered)

Before we jump into some animations, let’s think about how they’re going to be activated. Most of our animations won’t run immediately when a page loads. More commonly they’ll be triggered by a class change (via JavaScript) or using Pseudo Classes.

在進入一些動畫之前，讓我們考慮一下如何激活它們。頁面加載后，我們大多數動畫不會立即運行。通常， 它們是由類更改(通過JavaScript)或使用偽類觸發的。

偽F (Pseudo Foo)

Here are a few pseudo-classes that are most commonly used for animations.

以下是一些最常用于動畫的偽類。

:hoverThe hover pseudo-class is triggered when you hover over the target with the mouse. In this example, we set the <;p> to change its color to blue when hovered. It will revert back to its original color after the mouse moves off of it.

：hover當您將鼠標懸停在目標上時 ，將觸發懸停偽類。在此示例中，我們將< ; p>設置為在懸停時將其顏色更改為藍色。鼠標移開后，它將恢復為原始顏色。

<style> #hover-example:hover {  color: blue;  cursor: pointer; }</style>

<p id=”hover-example”>Hover example</p>

:focus

：焦點

“The :focus CSS pseudo-class represents an element (such as a form input) that has received focus.” — MDN

“：focus CSS偽類表示已獲得焦點的元素(例如表單輸入)。” — MDN

(um… isn’t that like using a word to define itself??)

(嗯……這不像用一個詞來定義自己嗎？)

Focus is mainly used for inputs and buttons when they’re selected/activated — that is, when you click on an input or tab into it. In this example, clicking or tabbing into the input will cause it to change the width and its background color. Clicking out of it will cause it to revert back to its original size (and color).

焦點主要用于選擇/激活輸入和按鈕時， 即單擊輸入或選項卡時 。在此示例中，單擊或制表符輸入將導致其更改寬度和其背景顏色。單擊它會使其恢復為原始大小(和顏色)。

<style> input:focus {  background-color: #f4f4f4;  width: 50vw; }</style>

<input type=”text”>

:activeActive seems similar to focus, but it’s usually only triggered for a split second. The first use case that comes to mind are anchors (links). In this example, we make anything with the class activate change while it’s being clicked (that is, while it’s active).

：active Active看起來類似于焦點，但是通常僅在瞬間觸發 。我想到的第一個用例是錨點(鏈接)。在此示例中，我們通過單擊類(即，在其處于活動狀態時) activate更改來進行任何操作。

<style> .activate:active {  background-color: orange; }</style>

<p class=”activate”>Click me!</p><div class=”activate”>Activate me!</div><button class=”activate”>Hold me!</button>

變形金剛 (Transformers)

“The transform CSS property lets you rotate, scale, skew or translate a given element. “ — MDN

“ transform CSS屬性使您可以旋轉，縮放，傾斜或平移給定元素。 “-MDN

Transform is where you take your CSS animations to the next level. There are 21 or so functions you can use with transform, but we will not cover all of them in this article.

變換是將CSS動畫提升到新水平的地方。您可以在transform中使用大約21個函數，但是本文將不介紹所有這些函數。

翻譯(x，y) (Translate ( x, y ))

To translate means you’re moving something. In the example below, we move whatever has the translate class 10rem over on the X-axis and 5rem over on the Y-axis. (If you’re not familiar with rem, you can use pixels, too.)

翻譯意味著您正在移動某些東西。在下面的例子中，我們移動任何有translate類10rem了在X軸和5rem了在Y軸。 (如果您不熟悉rem，也可以使用像素。)

This is the shorthand function that combines X and Y, but you can use translateX or translateY instead if you prefer.

這是組合X和Y的簡寫函數，但是如果您愿意，可以改用translateX或translateY 。

<style> .translate {  transform: translate(10rem, 5rem) }</style>

比例尺(x，y) (Scale ( x, y ))

Similar to translate, scale also has a scaleX, scaleY, and a scale shorthand function. Use scale to change the size of something. In the example below, elements with the scale class are reduced to half their size.

與translate相似，scale也具有scaleX ， scaleY和scale簡寫函數。使用比例改變某物的大小 。在下面的示例中，具有scale類的元素的大小減小到一半。

<style> .scale {  transform: scale(0.5); }</style>

變換原點 (x，y，z) (Transform-origin ( x, y, z ))

Transform-origin is an important property when dealing with animations, especially rotations. It’s a bit odd and difficult to explain with just words, and I strongly suggest looking at the MDN docs for this one if you’re not already familiar with changing origins (like in Photoshop). The documentation words it best:

處理動畫，尤其是旋轉時，變換原點是重要的屬性。僅憑文字很難解釋，這有點奇怪而且很難解釋，如果您還不熟悉更改來源(例如在Photoshop中)，強烈建議您查看MDN文檔。該文檔最好說：

“The transformation origin is the point around which a transformation is applied” — MDN

“轉換起點是應用轉換的起點” — MDN

Imagine a wheel:

想象一個輪子：

When the wheel spins it rotates around that center point. But now imagine that center point was moved to, say, the top left corner. Now the wheel rotates around that new point thus providing a very different experience. That center point is similar to the origin. See the CodePen for an interactive example.

車輪旋轉時，它將繞該中心點旋轉。但是現在想象一下，中心點已移至左上角。現在，車輪圍繞該新點旋轉，從而提供了非常不同的體驗。該中心點與原點相似。有關交互式示例，請參見CodePen 。

旋轉(角度) (Rotate (angle))

Rotate does exactly what it says it does. You can specify any angle, negative, positive, any number and it will spin it around that much. There are a few different values you can use (deg, rad, grad) — see more value types on MDN.

Rotate完全按照它說的去做。您可以指定任意角度，可以為負，為正，可以為任意角度，并且可以繞任意角度旋轉。您可以使用一些不同的值(度，弧度，梯度)，請參閱MDN上的更多值類型。

使事情順利 (Making things smooth)

Using transitions we can smooth things out and control the flow of our animations.

使用過渡，我們可以使事情變得平滑并控制動畫的流向。

Transitions are like tweens or a speed control for our animation. It can take 4 arguments, and I’ll cover each in detail.

過渡就像補間動畫或動畫的速度控制一樣。它可能需要4個參數，我將詳細介紹每個參數。

過渡財產 (transition-property)

Transition property is what you’re animating. This could be color, size, a transform, and so on. You could also say all to transition everything, but you should avoid doing this and be more specific.

過渡屬性就是您要設置的動畫 。這可以是顏色，大小，變換等。您也可以說all以過渡所有內容，但應避免這樣做，并且要更加具體。

There’s a huge list of properties you can animate on MDN. You should avoid animating anything not on the list.

您可以在MDN上設置動畫的屬性列表很多。您應該避免對列表中沒有的內容進行動畫處理。

transition-property: all;

過渡持續時間 (transition-duration)

This is how long the animation will take to finish. Use seconds or milliseconds.

這是動畫完成所需的時間 。使用秒或毫秒。

transition-duration: 2s;

過渡計時功能 (transition-timing-function)

This is where it gets more complex. The transition timing function is an acceleration curve that describes how the animation flows. Take a look at these sites to see what this curve looks like and how it affects the animation.

這就是它變得更加復雜的地方。過渡時間函數是描述動畫如何流動的加速曲線 。查看這些站點，以查看該曲線的外觀以及它如何影響動畫。

You can have it ease in then ease out, slowly start then finish fast, or a more complex flow with some slow parts and fast parts. There are many ways to have your animation flow.

您可以輕松地進行然后輕松地進行，緩慢地開始然后快速完成，或者使用一些較慢的部分和較快的部分進行更復雜的處理。有多種方法可以使動畫流動。

Luckily, there are some predefined values we can use:

幸運的是，我們可以使用一些預定義的值：

easeease-inease-outease-in-outlinearstep-startstep-end

You’ll have to play with them a bit to find the one for your animation.

您必須與他們一起玩一些才能找到適合您的動畫的那個。

Sometimes we’ll have to make our own using cubic-bezier (or use a library). For that, I suggest you find an online tool (see above links) or use your browser’s developer tools to make one.

有時，我們必須使用cubic-bezier (或使用庫 )來制作自己的。為此，我建議您找到一種在線工具(請參閱上面的鏈接)，或使用瀏覽器的開發人員工具進行構建。

transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);

過渡延遲 (transition-delay)

This is perhaps the simplest value. Transition-delay is the time it will wait before starting the effect. Use seconds or milliseconds.

這也許是最簡單的值。 Transition-delay是開始效果之前要等待的時間。使用秒或毫秒。

transition-delay: 500ms;

過渡 (屬性，持續時間，時間，延遲) (Transition (property, duration, timing, delay))

You’ve guessed it, this is the shorthand to combine all of the above functions.

您已經猜到了，這是結合以上所有功能的簡寫。

Here is what it looks like with one transition:

這是一個過渡的樣子：

transition: background 1s ease-in-out 0.5s;

For multiple, you need to add them to the same transition separated by commas.

對于多個，您需要將它們添加到由逗號分隔的相同過渡中。

transition: background 1s ease-in-out 0.5s,width 2s ease-in,height 1.5s;

結論 (In conclusion)

This is all you need to start making interactive websites. Go practice what you’ve learned, and once you have mastered the topics covered here, you can move on to more advanced animations.

這就是開始制作交互式網站所需的一切。練習所學知識，掌握了此處介紹的主題之后，就可以繼續學習更高級的動畫。

In the next article (or two) I’ll talk about keyframes, 3D transforms, performance, JavaScript animations, and more.

在下一篇(或兩篇)文章中，我將討論關鍵幀，3D變換，性能，JavaScript動畫等。

Thanks for reading! If you have any questions, comments, or criticism, then please leave a comment below and I’ll respond ASAP.

謝謝閱讀！如果您有任何疑問，意見或批評，請在下面留言，我將盡快答復。