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.

谢谢阅读！如果您有任何疑问，意见或批评，请在下面留言，我将尽快答复。