在最后一帧停止CSS3动画

180

我有4部分CSS3动画在单击时播放-动画的最后一部分是将其从屏幕上删除的。

但是，一旦播放，它始终会返回其原始状态。任何人都知道如何在它的最后一个css帧（100％）上停止它，或者如何在播放后摆脱掉整个div。

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

css css-animations

— 用户名
source

嘿尼克，您可以张贴正在使用的CSS和HTML吗？

— 塞巴斯蒂安·帕塔内·马苏埃利

嗨，塞巴斯蒂安，我已经用CSS和JavaScript更新了我的问题。我使用的唯一的html是带有onclick的div，以启动功能Rotate。

— user531192 2010年

在一个周期结束时

— MPelletier，2014年

374

您正在寻找：

animation-fill-mode: forwards;

有关MDN的更多信息和canIuse 上的浏览器支持列表。

— 行动方法
source

8

你知道这是否适用于Chrome吗？没有任何运气

— user531192 2010年

4

请接受此作为正确答案。有关此内容的更多说明：4waisenkinder.de/blog/2014/10/13/…–

— miron

@ user531192对于Chrome / Webkit浏览器，您必须使用 -webkit-animation-fill-mode: forwards;

— eivindml

Chrome不需要-webkit-前缀了，现在（至少从V49）

— 胶囊

1

我遇到的一个问题是我没有100% {}或to {}设置，因此即使使用animation-fill-mode: forwards;我的动画，我也仍然会在上失败0%。（我当时使用一些@for循环来创建动画，却忘记了手动添加from{}和to{}）；

— Phil Tune

25

如果要将此行为添加到速记animation属性定义中，则子属性的顺序如下

animation-name- 默认 none

animation-duration- 默认 0s

animation-timing-function- 默认 ease

animation-delay- 默认 0s

animation-iteration-count- 默认 1

animation-direction- 默认 normal

animation-fill-mode- 您需要将此设置为 forwards

animation-play-state- 默认 running

因此，在最常见的情况下，结果将是这样的

animation: colorchange 1s ease 0s 1 normal forwards;

请在此处查看MDN文档

— 达夫尼克维尔
source

19

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

浏览器支持

Chrome 43.0（4.0 -webkit-）
IE 10.0
Mozilla 16.0（5.0 -moz-）
Shafari 4.0 -webkit-
Opera 15.0 -webkit-（12.112.0 -o-）

用法：-

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

— Hitesh Sahu
source

5

最好的方法似乎是将最终状态放在CSS的主要部分。像这里一样，我将width设置为220px，使其最终变为220px。但是开始0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}

— 擎天柱
source

我认为这是解决此问题的最佳方法。

— 德鲁·贝克

3

您将webkitAnimationName设置为空不是问题，因此可以将对象的CSS重置为默认状态。如果只删除重置状态的setTimeout函数，它是否会停留在最终位置？

— jfriend00
source

1

我刚刚发布了一个类似的答案，您可能想看看：

http://www.w3.org/TR/css3-animations/#animation-events-

您可以找出动画的各个方面，例如开始和停止，然后，一旦说出了“停止”事件，您就可以对dom进行任何操作。我在一段时间前尝试了一下，它可以工作，但是我猜您暂时将只限于webkit（但是您可能已经接受了）。顺便说一句，由于我在2个答案的链接中都贴了相同的链接，因此我将提供以下一般性建议：查看W3C-他们几乎编写了规则并描述了标准。而且，Webkit开发页面是非常关键的。

— 杰西
source

0

实际上没有人带来它，它的制作方式是将动画播放状态设置为暂停。

— 马可
source

-2

我今天了解到，填充模式要使用一个限制。这是来自Apple开发人员。谣言是*大约* 6，但不确定。另外，您可以将类的初始状态设置为动画结束的方式，然后*将其初始化为/ 0％。

— 心跳
source