CSS动画快速介绍

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)