这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
Web 动画 API
's
EffectTiming
dictionary's
fill
property specifies a
fill mode
, which defines how the element to which the animation is applied should look when the animation sequence is not actively running, such as before the time specified by
iterationStart
or after animation's end time.
For example, setting fill to
"none"
means the animation's effects are not applied to the element if the current time is outside the range of times during which the animation is running, while
"forwards"
ensures that once the animation's end time has been passed, the element will continue to be drawn in the state it was in at its last rendered frame.
Note that authors are discouraged from using fill modes to persist the effect of an animation indefinitely. See the alternatives to fill modes section below for approaches that are simpler and more performant.
Element.animate()
，和
KeyframeEffect()
accept an object of timing properties including
fill.
值
fill
corresponds directly to
fill
in
EffectTiming
objects returned by
getTiming()
in
AnimationEffect
and
KeyframeEffect
.
var timingProperties = {
fill: "none" | "forwards" | "backwards" | "both" | "auto"
}
A
DOMString
indicating the fill type to use in order to properly render an affected element when outside the animation's
active interval
(that is, when it's not actively animating). The default is
"auto"
.
"none"
playState
is
pending
采用
delay
, when its
playState
is
finished
, or during its
endDelay
or
delay
. In other words, if the animation isn't in its active interval, the affected element is not visible.
"forwards"
endDelay
or when its
playState
is
finished
.
"backwards"
delay
and
pending
playState
.
"both"
forwards
and
backwards
: The animation's effects should be reflected by the element(s) state prior to playing and retained after the animation has completed playing, in spite of and during any
endDelay
,
delay
and/or
pending
or
finished
playState
.
"auto"
KeyframeEffect
or
KeyframeEffectReadOnly
),
"auto"
相当于
"none"
. Otherwise, the result is
"both"
.
Here are a few examples.
The HTML is pretty simple. We have a
<div>
命名
"main"
which is a container for the element we'll be animating, which is a
<div>
with the ID
"box"
. Below that, another
<div>
serves as a button that will trigger the animation to begin.
<div class="main"> <div id="box"> <div id="text">Look! A box!</div> </div> </div> <div class="button" id="animateButton"> Animate! </div>
.main {
width: 300px;
height:300px;
border: 1px solid black;
}
.button {
cursor: pointer;
width: 300px;
border: 1px solid black;
font-size: 16px;
text-align: center;
margin-top: 0px;
padding-top: 2px;
padding-bottom: 4px;
color: white;
background-color: darkgreen;
font: 14px "Open Sans", "Arial", sans-serif;
}
#text {
width: 160px;
padding: 10px;
position: relative;
text-align: center;
align-self: center;
color: white;
font: bold 2em "Lucida Grande", "Open Sans", sans-serif;
}
While there's other CSS involved in this example, the part that really matters for our purposes is the CSS that styles the
"box"
element that we'll be animating. That CSS looks like this:
#box {
width: 200px;
height: 200px;
left: 50px;
top: 50px;
border: 1px solid #7788FF;
margin: 0;
position: relative;
background-color: #2233FF;
display: flex;
justify-content: center;
}
All this does is specify the size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container. Note that there's no rotation applied.
Now let's check out the JavaScript. First we'll define the two objects that describe the keyframes and the timing configuration to use, then we'll actually see the code that triggers and runs the animation when the
"animateButton"
button is clicked.
var boxRotationKeyframes = [
{ transform: "rotate(-90deg)" },
{ transform: "rotate(90deg)" }
];
boxRotationKeyframes
object is an array of keyframes, each describing the state of the affected element at a point in the animation process. In this case, we have just two keyframes; the first defines what affect is applied to the element
immediately after the animation first begins to play
, and the second defines the effect applied to the element in the
last moment before it ends
. Those phrases are crucial. Let's look at why.
The first keyframe says that when the animation begins, the element should be rotated 90° to the left. That means that unless we specify otherwise using the
fill
property, the instant the animation is started the element will be rotated to the left 90°, and then it will animate smoothly from there. Since by default the box isn't rotated,
The last keyframe says that the animation's final frame should draw the animation rotated 90° to the right from its original orientation.
var boxRotationTiming = {
duration: 2000,
iterations: 1,
fill: "none"
};
boxRotationTiming
object describes how long the animation should take to run, how many times it should run, what state the element should be in before the animation begins and after it ends, and so forth.
Here we specify that the animation should take 2000 milliseconds (2 seconds) to complete, should only run once, and that the fill mode should be
"none"
. As defined above, the
"none"
fill mode means that the element will be rendered in its natural, unaltered condition anytime the animation isn't actively running.
document.getElementById("animateButton").addEventListener("click", event => {
document.getElementById("box").animate(
boxRotationKeyframes,
boxRotationTiming
);
}, false);
The rest of the code is pretty simple: it adds an event listener to the "Animate" button so that when it's clicked by the user, the box is animated by calling
Element.animate()
on it, providing the
boxRotationKeyframes
and
boxRotationTiming
objects to describe the animation that should occur.
Below we see what the result looks like. Notice how before the animation starts running, the box is upright, then upon clicking the "Animate!" button, the box is instantly rotated 90° to the left (to correspond to the first keyframe in the animation sequence). Then, when the animation finishes running, the box instantaneously leaps back to its original state and is upright once again.
Give it a try below!
在
Follow the White Rabbit
example, the White Rabbit's animation is formed by coupling a
KeyframeEffect
采用
动画
对象。
keyframeEffect
takes an object of
timing properties
, which is where we pass in
fill
.
Forwards
makes the rabbit retain its last keyframe rather than reverting to its unanimated state:
// Create a set of keyframes to slide the rabbit down the hole--and keep him down with 'fill'!
var rabbitDownKeyframes = new KeyframeEffect(
whiteRabbit,
[
{ transform: 'translateY(0%)' },
{ transform: 'translateY(100%)' }
], {
duration: 3000,
fill: 'forwards'
}
);
// Set up the rabbit's animation to play on command by calling rabbitDownAnimation.play() later
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
Fill modes are primarily provided as a means of representing the animation-fill-mode feature of CSS animations. When used to persist the effect of an animation indefinitely, however, they have a number of drawbacks:
Rather than using fill modes to persist an animation, it is often simpler to set the final value of the animation effect directly in specified style:
elem.animate({ transform: 'translateY(100px)' }, 200).finished.then(() => {
elem.style.transform = 'translateY(100px)';
});
Alternatively, it may be simpler still to set the final value in specified style before triggering the animation and then animate from the start value. This is the approach used in FLIP animation .
elem.style.transform = 'translateY(100px)';
elem.animate({ transform: 'none', offset: 0 }, 200);
For some complex effects where animations layer on top of one another, it may be necessary to use a fill mode temporarily to capture the final value of an animation before canceling it.
elem.addEventListener('click', async evt => {
const animation = elem.animate(
{ transform: `translate(${evt.clientX}px, ${evt.clientY}px)` },
{ duration: 800, fill: 'forwards' }
);
await animation.finished;
// commitStyles will record the style up to and including `animation` and
// update elem’s specified style with the result.
animation.commitStyles();
animation.cancel();
});
| 规范 | 状态 | 注释 |
|---|---|---|
|
Web 动画
The definition of 'fill' in that specification. |
工作草案 | 编者草案。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
fill
|
Chrome 52 | Edge 79 | Firefox 63 | IE No | Opera Yes | Safari No | WebView Android 52 | Chrome Android 52 | Firefox Android 63 | Opera Android No | Safari iOS No | Samsung Internet Android Yes |
完整支持
不支持
实验。期望将来行为有所改变。
Element.animate()
and
KeyframeEffect.KeyframeEffect()
both accept an object of timing properties including this one.
EffectTiming
如返回通过
getTiming()
in
AnimationEffect
and
KeyframeEffect
.
animation-fill-mode