css 图片填充模式
I’m sure just about all of us working in front-end development have fiddled with CSS keyframe-based animations at some point. Some of us may have even created some pretty complex demos and experiments with this feature.
我确信几乎所有从事前端开发的人都在某个时候摆弄过基于CSS关键帧的动画 。 我们中有些人甚至可能使用此功能创建了一些非常复杂的演示和实验。
If you want a comprehensive introduction to the topic, my 2011 article on Smashing Magazine is still a good option. In this article, however, I wanted to focus on a single part of the CSS Animations spec: the animation-fill-mode property.
如果您想对该主题进行全面介绍，那么我在2011年关于Smashing Magazine的文章仍然是不错的选择。 但是，在本文中，我想重点介绍CSS动画规范的单个部分： animation-fill-mode属性。
This is the one animation-based property that isn’t very self-explanatory. For example, nobody really gets confused by animation-name, animation-duration, and so forth… But what on earth does “fill mode” mean? Let’s briefly consider this, with some examples.
这是一个基于动画的属性，并不是很容易理解。 例如，没有人真正对animation-name ， animation-duration等感到困惑……但是“填充模式”到底是什么意思？ 让我们用一些示例简要地考虑一下。
As you might already know, a basic keyframe animation is defined using the @keyframes at-rule. But the keyframes won’t do anything unless you associate them with an animation name. Here’s a shorthand animation property declaration, so you can see what I mean:
您可能已经知道，基本的关键帧动画是使用@keyframes规则定义的。 但是除非您将关键帧与动画名称相关联，否则关键帧将无法执行任何操作。 这是一个简短的animation属性声明，因此您可以了解我的意思：
.example { animation: myAnim 2s 500ms 2 normal ease-in forwards; }And of course, this same shorthand line can be expanded to:
当然，可以将这条速记线扩展为：
.example { animation-name: myAnim; animation-duration: 2s; animation-delay: 500ms; animation-iteration-count: 2; animation-direction: normal; animation-timing-function: ease-in; animation-fill-mode: forwards; }The animation-fill-mode property is defined last in both examples, and in both cases the value is set to “forwards”. We don’t have to define it last, but that might be a good practice to get into.
在两个示例中最后都定义了animation-fill-mode属性，并且在两种情况下，该值均设置为“ forwards”。 我们不必最后定义它，但这可能是一个很好的实践。
Again, even if you’ve never used CSS animations, you can probably figure out what everything in that declaration above is doing – except animation-fill-mode.
同样，即使您从未使用过CSS动画，也可能可以弄清楚上面的声明中的所有内容在做什么–除了animation-fill-mode 。
So what does the spec say about this property?
那么规范对这个属性怎么说？
The animation-fill-mode property defines what values are applied by the animation outside the time it is executing.
animation-fill-mode属性定义了动画在执行时间之外应用的值。
As it goes on to explain, the time “outside” of execution, specifically, is referring to the time between when the animation is applied to the element, and the time that the element actually starts animating. Basically, with a fill-mode value, you define the appearance of your animated element outside of the time the animation is taking place, but after the animation has been applied. Might sound confusing, but you’ll see what I mean in a moment.
继续说明，执行的“外部”时间具体是指将动画应用于元素到元素实际开始进行动画处理之间的时间。 基本上，使用填充模式值，您可以在动画发生时间之外(但在应用动画之后)定义动画元素的外观。 听起来可能会令人困惑，但是稍后您会明白我的意思。
Let’s build on that basic definition (which might still be a bit confusing) by looking at each of the possible values.
通过查看每个可能的值，让我们以该基本定义(可能仍然有些混乱)为基础。
The animation-fill-mode property can accept one of four values: none, forwards, backwards, or both. Here’s a breakdown of each.
animation-fill-mode属性可以接受以下四个值之一： none ， forwards ， backwards或both 。 这是每个的细分。
This is the initial, or default value for animation-fill-mode. The only time you would define a value of none without being superfluous would be if you are setting it via JavaScript to change it from one of the other values, or if you’re overriding something in the cascade.
这是animation-fill-mode的初始值或默认值。 唯一的一次，你会定义的值none而不多余的，如果你是通过JavaScript将其设置为它从另一个值中的一个改变，或者如果你是覆盖在级联的东西会。
To understand what a value of none does, here’s a CodePen demo showing an animation with no animation-fill-mode defined (thus, it has a value of none):
要了解none值的作用，这是一个CodePen演示，显示了一个未定义animation-fill-mode (因此，它的值为none )：
See the Pen Example with animation-fill-mode: none by SitePoint (@SitePoint) on CodePen.
请参阅带有动画填充模式的钢笔示例： CodePen上的SitePoint ( @SitePoint ) 没有提供 。
You can see that in most cases, a fill-mode of “none” is not what you’ll want. Remember that fill-mode defines how the element will look, outside the time that the animation is executing.
您可以看到，在大多数情况下，您不需要的填充模式为“无”。 请记住，填充模式定义了动画执行时间之外元素的外观。
In this example, the ball starts out red, then fades to pink while at the same time moving to the right and changing size. It would be preferable if, when the animation finished, the ball stayed small, pink, and off to the right. This will avoid the ugly jump back to the start when the animation finishes.
在此示例中，球从红色开始，然后逐渐变为粉红色，同时向右移动并更改大小。 如果动画结束时，球保持较小，粉红色并向右偏，那将是更好的选择。 这样可以避免动画结束时难看的跳回起点。
Let’s change our ball animation to have a fill-mode value of “forwards”:
让我们将球动画更改为填充模式值为“ forwards”：
See the Pen Example with animation-fill-mode: forwards by SitePoint (@SitePoint) on CodePen.
请参阅带有动画填充模式的Pen 示例：在CodePen上由SitePoint( @SitePoint ) 转发 。
Now you can see the benefit of using animation-fill-mode and why a value of forwards is used more than any other. When we define it with this value, we are telling the browser that we want our animated element to hold on to its final set of styles, as defined in the last keyframe. This way, we don’t get that final jump back to the initial state of the element before it started animating (the “reset” button that I’ve added to the demo does this for us).
现在，您将看到使用animation-fill-mode的好处，以及为什么使用forwards值比其他任何值都多的原因。 当我们使用此值定义它时，我们告诉浏览器我们希望动画元素保持其最后一组样式，如最后一个关键帧中所定义。 这样，在元素开始动画制作之前，我们不会最终返回到元素的初始状态(我添加到演示中的“重置”按钮为我们完成了此操作)。
Let’s change the value to backwards — what happens now?
让我们将值更改为backwards -现在会发生什么？
See the Pen Example with animation-fill-mode: backwards by SitePoint (@SitePoint) on CodePen.
请参阅带有动画填充模式的钢笔示例：在CodePen上由SitePoint( @SitePoint ) 向后 移动 。
Notice that the behavior in this demo is exactly the same as the first demo that has an animation-fill-mode value of “none”. Why is that?
请注意，该演示中的行为与animation-fill-mode值为“ none”的第一个演示完全相同。 这是为什么？
In contrast to forwards, a value of backwards, upon finishing the animation, gives the element the styles that it had before the animation began. This makes more sense when we see what the spec says for the value backwards:
相比于forwards ，值backwards ，在完成动画，给人的风格，它有动画开始之前的元素。 当我们看到规格说明的值backwards时，这更有意义：
During the period defined by animation-delay, the animation will apply the property values defined in the keyframe that will start the first iteration of the animation. These are either the values of the from keyframe […] or those of the to keyframe.
在animation-delay定义的时间段内，动画将应用在关键帧中定义的属性值，该属性值将开始动画的第一次迭代。 这些是from关键帧[…]或to关键帧的值。
To demonstrate this, I’ve made two modifications to the demo:
为了证明这一点，我对演示进行了两个修改：
Added a “from” keyframe with a different color for the ball. 为球添加了具有不同颜色的“ from”关键帧。Added a delay using the animation-delay property.
使用animation-delay属性添加了延迟。
Here it is:
这里是：
See the Pen Example with animation-fill-mode: backwards (2) by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上具有 Sitepoint( @SitePoint )的动画填充模式的笔示例：向后(2) 。
Now you can see that as soon as you push the “Start The Animation” button, the ball turns blue. This is because there is a noticeable delay. Technically, every animation has a default delay, but the delay is 0s, so you don’t really see the value of backwards in such a case, and you certainly don’t see it if the styles in the initial keyframe are the same as those prior to when the animation begins. With the same styles and the same delay in place, removing the value backwards would cause the ball to stay red until the animation begins.
现在您可以看到，只要按下“开始动画”按钮，球就会变成蓝色。 这是因为存在明显的延迟。 从技术上讲，每个动画都有默认延迟，但延迟为0s ，因此在这种情况下您实际上看不到backwards的值，并且如果初始关键帧中的样式与动画开始之前的那些。 在具有相同样式和相同延迟的情况下， backwards删除该值将导致球保持红色直到动画开始。
To be honest, I don’t really see a lot of practical use for the value backwards. It’s hard to imagine too many scenarios where the animation has different styles in the first keyframe than it does in the static pre-animation state of the element. But I’m willing to hear some use cases if you have any ideas.
老实说，我并没有看到将价值backwards的实际用途。 很难想象有太多场景的动画在第一个关键帧中的样式与在元素的静态预动画状态下的样式不同。 但是，如果您有任何想法，我愿意听听一些用例。
The final value we’ll look at is a value of both. This value tells the browser to apply the effects of both forwards and backwards.
我们将看到的最终值是both的值。 该值告诉浏览器应用forwards和backwards 。
Let’s keep the same styles in our demo and see what happens when we give it a value of both:
让我们在演示中保留相同的样式，看看当我们同时给它们both值时会发生什么：
See the Pen Example with animation-fill-mode: both by SitePoint (@SitePoint) on CodePen.
请参阅带有动画填充模式的钢笔示例：都由CodePen上的SitePoint( @SitePoint ) 编写 。
Not rocket science. As you can see, during the initial delay period, the initial keyframe styles are applied, and then the animation finishes and freezes with the styles from the final keyframe (which is, as mentioned, often what you will want). And again, this value would not be very different from just using forwards if it were not for the delay and the alternate color defined in the first keyframe.
不是火箭科学。 如您所见，在初始延迟期间，将应用初始关键帧样式，然后动画结束并冻结最终关键帧中的样式(如上所述，这通常是您想要的)。 同样，如果该值不是用于延迟和第一个关键帧中定义的备用颜色，则该值与仅使用前forwards值不会有很大不同。
Based on the above, along with some details in the spec, here are some things to take note of:
基于以上内容，以及规范中的一些细节，以下是一些需要注意的事项：
Although I’ve somewhat minimized the importance of the values backwards and both, these could come in handy in complex animations that are controlled by scripting or user input. Use cases will abound (think: games), but only with experimenting and innovation.
虽然我已经有点最小的价值观的重要性backwards和both ，这些能派上用场的由脚本或用户输入来控制复杂的动画。 用例将比比皆是(以游戏为例)，但只有通过试验和创新。
The effect of the forwards and backwards values are reversed in cases where the animation-direction property is set to reverse. If you fiddle with the demo, you’ll see how this works.
所述的效果forwards和backwards值被颠倒在所述箱子animation-direction属性被设置为reverse 。 如果您在演示中摆弄，您将看到它是如何工作的。
Although I said that animation-fill-mode accepts only four values, remember that there are CSS-wide property values that can also be used.
尽管我说过animation-fill-mode仅接受四个值，但请记住，还有一些CSS范围的属性值也可以使用。
In earlier versions of the spec, animation-fill-mode was not part of the shorthand animation property but it seems like all browsers that support keyframes are fine with it in shorthand.
在该规范的早期版本中， animation-fill-mode不是速记animation属性的一部分，但似乎所有支持关键帧的浏览器都可以使用速记形式。
When using animation shorthand and choosing a custom name for your animation, don’t use a name that matches valid fill-mode values (like “reverse” or “forwards”), otherwise the browser will parse the shorthand declaration assuming the name is actually a fill-mode value. 使用动画速记并为动画选择自定义名称时，请不要使用与有效填充模式值匹配的名称(例如“ reverse”或“ forwards”)，否则浏览器将假定该名称实际上是解析速记声明填充模式值。I hope this summary has helped you understand this property a little better. Some of this research certainly helped me understand it a little better. If you’ve done some unique things with animation-fill-mode or have any unique use cases for the different values, or corrections to this article, let us know in the discussion.
希望本摘要有助于您更好地了解此属性。 某些研究无疑帮助我更好地理解了它。 如果您使用animation-fill-mode完成了一些独特的操作，或者对不同的值有任何独特的用例，或者对本文进行了更正，请在讨论中告知我们。
翻译自: https://www.sitepoint.com/understanding-css-animation-fill-mode-property/
css 图片填充模式
