animation-fill-mode属性的理解

Posted 2023-05-09

参考技术A

在动画等待阶段，none、forwards保持的还是元素最初始的状态，而backwards和both保留的是动画第一帧的状态。

从上图可看出，动画执行过程中的状态都是一样的。所以，区别在于动画等待阶段和动画结束后。

动画结束后，none、backwards回到了最初始状态，forwards、both保留的是动画最后一帧的状态。

所以，总结一下animation-fill-mode用法：
animation-fill-mode：控制动画执行前和执行后的状态。
一个动画过程可分为动画等待、动画执行、动画结束，默认情况下，只有动画执行阶段才会触发@keyframes中声明的动画。
- animation-fill-mode：none ；
-默认值。在设置了动画延迟情况下(设置延迟的目的是为了区分在动画等待阶段的差异)，在动画等待阶段，保留的是元素最初始的状态，动画结束后，仍然回到元素最初始的状态。
- animation-fill-mode: forwards;
- 在设置了动画延迟情况下，动画等待阶段，保留的是元素最初始的状态，动画结束后，保留最后一帧的状态
- animation-fill-mode: backwards;
- 在设置了动画延迟情况下，在动画等待阶段，保留的是动画第一帧(from或者0%)的状态或者最后一帧(当使用了 animation-direction: reverse;)的状态。动画结束后，回到的是元素最初始状态。
- animation-fill-mode: both;
- 在设置了动画延迟情况下，在动画等待阶段，保留的是动画第一帧(from或者0%)的状态或者最后一帧(当使用了 animation-direction: reverse;)的状态。动画结束后，保留最后一帧的状态。可以看出，是forwards和backwards的结合。

animation-fill-mode使用案例：

CSS3针对不同属性的不同自定义缓动

【中文标题】CSS3针对不同属性的不同自定义缓动

【英文标题】：CSS3 different custom easing for different properties

【发布时间】：2015-01-18 07:29:49

【问题描述】：

我已经为某个 div 设置了动画。

.Animation

-webkit-animation-fill-mode: both; /*and also -moz, -ms etc. */
animation-fill-mode: both;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 2s;
animation-duration: 2s;


@-webkit-keyframes scaleAnimation /*and also -moz, -ms etc. */ 
 
0%

    opacity: 0;
    -webkit-transform: scale(2);


100%

    opacity: 1;
    -webkit-transform: scale(1);



.ScaleAnimation

-webkit-animation-name: scaleAnimation;  /*and also -moz, -ms etc. */
animation-name: scaleAnimation;

但我想要一个 不同 自定义缓动（三次贝塞尔曲线）用于不透明度和另一个自定义缓动用于变换。我该如何让它发挥作用。

以下操作无效：

transition: opacity 1s ease-in-out;
transition: scale 1s ease-in-out;

因此，它绝对不适用于自定义缓动，cubic-bezier(0.555, -0.130, 0.270, 1.075);例如。

有什么想法吗？ :)

【问题讨论】：

animation-timing-function: cubic-bezier(...

如果你用逗号分隔转换，它应该可以工作，例如- transition: opacity 1s ease-in-out, scale 1s cubic-bezier(0.555, -0.130, 0.270, 1.075);

CSS transition shorthand with multiple properties? 的可能重复项

@Paulie_D 不幸的是，这在此关键帧设置中不起作用。动画不会开始。

【参考方案1】：

对于转换，您可以通过逗号分隔来指定多个转换。

transition: <duration> <property> <delay> <timing-function>, ....
transition: 1s opacity 1s ease-in-out, 1s scale 1s linear;

如果你想走动画/关键帧路线，那么你可以创建两个动画关键帧。一个用于比例，另一个用于不透明度。然后在元素的动画设置中用逗号分隔它们。

缓动的属性是animation-timing-function。对于基于 webkit 的浏览器（从您的问题看来，您不介意供应商前缀），它变为 -webkit-animation-timing-function。

你可以像这样设置 sn-p:

div 
    width: 120px; height: 120px;
    background-color: red;
    display: inline-block;


div.d1 
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 2s, 2s;
    -webkit-animation-duration: 2s, 2s;
    -webkit-animation-name: scaleAnimation, opacityAnimation;
    -webkit-animation-timing-function: 
        cubic-bezier(0.1, 0.7, 1.0, 0.1),  ease-in;


div.d2 
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 2s, 2s;
    -webkit-animation-duration: 2s, 2s;
    -webkit-animation-name: scaleAnimation, opacityAnimation;
    -webkit-animation-timing-function: linear linear;


@-webkit-keyframes scaleAnimation  
    0% 
        -webkit-transform: scale(2);
    
    100% 
        -webkit-transform: scale(1);
    


@-webkit-keyframes opacityAnimation  
    0% 
        opacity: 0;
    
    100% 
        opacity: 1;
    

<div class="d1">D1</div>
<div class="d2">D2</div>

小提琴：http://jsfiddle.net/abhitalks/3y7pcd1t/1/

.

【讨论】：

嗨@abhitalks 感谢您的回答！在您的示例中，它是两个不同的 div。在我的一个 div 中，它具有不同的比例和不透明度缓动。您是否建议仅将一个 div 包裹在另一个 div 周围？然后将一个动画应用于 div 并将另一个动画应用于包装器？还是有更好的解决方法？谢谢。 :)

@user2987394：有两个div 只是为了向您展示正在应用不同的缓动。拥有两个divs 很容易比较，不是吗？ :) 只需从小提琴中删除第二个 div 并根据您的要求进行调整。

谢谢！是的，对不起，对您的两个 div 示例的错误解释。但是很好，这很完美。 :)