2

今天看了css3的动画,对animation的其他属性都比较容易理解,唯独这个animation-fill-mode让我操碎了心。

找了些下面的描述:

规定对象动画时间之外的状态。

有四个值可选,并且允许由逗号分隔多个值。

  • none 不改变默认行为。

  • forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

  • backwardsanimation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

  • both 向前和向后填充模式都被应用。

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

对于单个none,forwards,backwards还可以勉强理解,对于其他的就晕菜了,希望有人指点一下(尽量说的通俗易懂点),最好配上示例或图例帮助理解。

...

2015-10-16 提问
3 个回答
25

已采纳

假设有一个盒子,HTML:

<div class="box"></div>

CSS如下:


.box{
    transform: translateY(0);
}
.box.on{
    animation: move 1s;
}

@keyframes move{
    from{transform: translateY(-50px)}
    to  {transform: translateY( 50px)}
}

使用图片来表示 translateY 的值与 时间 的关系:

  • 横轴为表示 时间,为 0 时表示动画开始的时间,也就是向 box 加上 on 类名的时间,横轴一格表示 0.5s

  • 纵轴表示translateY的值,为 0 时表示 translateY 的值为 0,纵轴一格表示 50px

  1. animation-fill-mode: none
    animation-fill-mode: none

  2. animation-fill-mode: backwards
    animation-fill-mode: before

  3. animation-fill-mode: forwards
    animation-fill-mode: after

  4. animation-fill-mode: both
    animation-fill-mode: both

1
回复 luckyyulin

forward 和 none 在动画开始之前,不应用动画中的初始值

新しい世界 · 2016年09月23日

展开评论
9

首先,你要明白动画分为 初始状态 等待期 动画执行期 完成期 四个阶段。

初始状态,就是没有触发动画效果时,你元素原本应该有的状态。
例如你的动画是通过点击触发的,那么你元素在还没有点击的时候,是受初始状态样式控制的,也就css中不含 animation 的其他属性控制。

等待期,就是 animation-delay 设置的延迟期间。

按照点击触发为例子,等待期就是从你点击元素开始计算,持续 animation-delay 计时结束的这段时间。

这个期间的样式会受到 animation-fill-mode 取值的影响。

如果为 none,表示等待期间元素没有变化,还是初始状态的样式。
如果为 backwards 或者 both,表示等待期元素样式为第一帧的样式。

注意是第一帧的概念,可能时 @keyframes 中的 0%,也有可能为 100% 。取决于 animationo-direction 属性。

1、当 animationo-direction 为 normal 或者 alternate 时,第一帧就是 0% 中定义样式。
2、当 animation-direction 为 reverse 或者 alternate-reverse时,第一帧就时 100% 中定义样式。

如果为 forwards,对于等待期而言没有意义,这个是定义完成状态时元素样式,下面会细说。

动画执行期,指的是 delay 结束瞬间开始执行动画,一直持续到最后一帧。
注意最后一帧的概念也是很绕,它一定属于 @keyframes 中的 0% 或者 100% 中之一。但具体为哪一个受到 animation-direction 和 animation-iteration-count 取值影响。

总结:
1、当 animation-direction:normal 时,最后一帧总为 100% 样式,无关 animation-iteration-count。
2、当 animation-direction:reverse 时,最后一帧总为 0% 样式,也无关 animation-iteration-count。
3、当 animation-direction:alternate时,animation-iteration-count 为单数时,最后一帧 为 100%, 双数为 0%;
4、当 animation-direction:alternate-reverse时,animation-iteration-count 为单数时,最后一帧 为 0%, 双数为 100%;

完成状态,执行完最后一帧时,元素处于的状态
如果你理解最后一帧,就能理解完成状态。ifinite 的动画没有完成状态。
animation-fill-mode 取值 none。表示动画结束,元素回归初始状态,而且是瞬间回归,无动画效果。

animation-fill-mode 取值 forwards 或者 both。表示动画执行完最后一帧,保持在最后一帧样式。再次申明,最后一帧可能为 @keyframes 中的 0% 或者 100% 之一。

最后总结
none 表示 等待期和完成期,元素样式都为初始状态样式,不受动画定义(@keyframes)的影响。

both 表示 等待期样式为第一帧样式,完成期保持最后一帧样式。

backwards 表示等待期为第一帧样式,完成期跳转为初始样式

forwards 表示等待期保持初始样式,完成期间保持最后一帧样式。

1

通俗的讲就是动画结束之后保持什么状态。

  1. none 表示不设置结束之后的状态,默认情况下回到跟初始状态一样。

  2. forwards 表示将动画元素设置为整个动画结束时的状态。

  3. backwards 明确设置动画结束之后回到初始状态。

  4. both 表示设置为结束或者开始时候的状态。一般都是回到默认状态。

剩下那些逗号分隔的就是配置多个。写几个 demo 试试就明白了。

撰写答案

推广链接