css关键帧动画
Previously I’ve discussed the concepts of keyframes and tweening that are central to animation. Now that this technology has arrived in modern browsers, it’s time to discuss how to make use of keyframe animations on the web with CSS.
之前，我已经讨论了关键帧和补间对于动画至关重要的概念 。 如今，这项技术已出现在现代浏览器中，是时候讨论如何通过CSS在Web上使用关键帧动画了。
CSS关键帧与过渡 (CSS Keyframes vs Transitions)
The term “CSS Animation” can be confusing: does it mean CSS transitions, keyframes, or both? While transitions and keyframes share a similar syntax and goals, they are distinct techniques:
“ CSS动画”一词可能会引起混淆：这是否意味着CSS过渡 ，关键帧或两者兼而有之？ 尽管过渡和关键帧具有相似的语法和目标，但它们是不同的技术：
- CSS transitions are simple animations with only two possible points: a start frame and an end frame. CSS过渡是简单的动画，只有两个可能的点：开始帧和结束帧。
Control of a transition is limited to defining those start and end point, and the time and easing curve between them.
过渡的控制仅限于定义这些起点和终点以及它们之间的时间和缓动曲线 。
Transitions are “one-shot” events, usually triggered by a user action (a mouseover, for example). CSS keyframe animations do not need a triggering event, and can loop or cycle.
过渡是“一次性”事件，通常由用户操作(例如，鼠标悬停)触发。 CSS关键帧动画不需要触发事件，并且可以循环或循环。
使用关键帧与过渡 (Using Keyframes vs Transitions)
CSS keyframe syntax is a little complex, so it should be used only when needed. If the animation is simply between one point and another, with no intermediate steps, and does not loop, use a transition. If the animation is between a series of states – a ball bouncing across the screen, for example – use keyframes. On the other hand, truly complex animations are probably best left to a specialized animation tool, rather than trying to code it in CSS.
CSS关键帧语法有点复杂，因此仅应在需要时使用。 如果动画只是在一个点和另一个点之间，没有中间步骤，并且没有循环，请使用transition 。 如果动画处于一系列状态之间(例如，一个球在屏幕上弹跳)，请使用关键帧。 另一方面，最好将真正复杂的动画留给专门的动画工具使用，而不要尝试使用CSS对其进行编码。
For our purposes, the term “CSS animation” covers both keyframes and transitions.
就我们的目的而言，术语“ CSS动画”涵盖关键帧和过渡。
CSS关键帧语法 (CSS Keyframe Syntax)
In a sense, creating a keyframe animation is very similar to defining an embedded font with @font-face: we define the animation and then reference that definition later our stylesheet.
从某种意义上讲，创建关键帧动画与使用@font-face定义嵌入字体非常相似：我们定义动画，然后在样式表中引用该定义。
First, let’s start by creating a simple HTML element to animate. This could be absolutely anything: an image, a paragraph, any piece of web content at all. I’m going to take a simple <div> and style it into a circle with border-radius:
首先，让我们开始创建一个简单HTML元素进行动画处理。 绝对可以是任何东西：图像，段落，任何Web内容。 我将使用一个简单的<div>并将其设置为带有border-radius ：
div#redball {
width: 150px; height: 150px;
border: 2px solid #000;
background: red;
border-radius: 50%;
position: absolute;
}Which modifies the appearance of the matching element in our <body>:
这会修改匹配元素在<body>的外观：
<div id="redball"></div>The easiest way to think of CSS keyframes is not as frames per se, but as points along a timeline of arbitrary length. The start of the animation will be 0%; halfway through, 50%, and completed, 100%. So a simple two-keyframe animation to make our #redball element move could look like this:
考虑CSS关键帧的最简单方法不是本身就是帧，而是沿任意长度的时间轴上的点。 动画的开始为0％； 中途完成50％，完成100％。 因此，使我们的#redball元素移动的简单两帧动画如下所示：
@keyframes bounce {
0% { top: 300px; }
100% { top: 0; }
}(Note the inner curly braces).
(请注意内部花括号)。
As a general rule this should go at the start of our stylesheet, just as we do with @font-face. Note that the name used for the animation sequence (“bounce” in our case) is arbitrary: you can pretty much call the animation whatever you like, so long as the name follows web naming conventions, and you refer to the same name later when you call the sequence.
通常，这应该在样式表的开头，就像我们对@font-face 。 请注意，用于动画序列的名称(在我们的示例中为“ bounce ”)是任意的：您可以随意调用该动画，只要该名称遵循网络命名约定 ，然后在以下情况下使用相同的名称即可：您调用序列。
Let’s do that now: go back to our #redball CSS definition and add a call to the animation, together with some other information:
现在让我们开始：回到我们的#redball CSS定义，并向动画添加调用，以及其他一些信息：
div#redball {
width: 150px; height: 150px;
border: 2px solid #000;
background: red;
border-radius: 50%;
position: absolute;
animation: bounce 2s infinite alternate;
}The duration part (2s, for two seconds) is the same as that used in CSS transition animations; infinite means that the animation will play forever, and alternate means that the animation will “ping-pong” back and forth. I’ll get into more properties, together with some practical examples, in upcoming articles.
持续时间部分( 2s ，持续2秒)与CSS过渡动画中使用的持续时间部分相同； infinite意味着动画将永远播放，而alternate意味着动画将来回“乒乓”。 在接下来的文章中，我将介绍更多属性以及一些实际示例。
翻译自: https://thenewcode.com/487/The-Basics-of-CSS-Keyframe-Animation
css关键帧动画
2666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
