222

我有一个 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); }
}
4

8 回答 8

438

您正在寻找：

animation-fill-mode: forwards;

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

于 2010-12-06T03:31:37.913 回答
38

如果要将此行为添加到速记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 文档

于 2017-08-21T09:59:42.520 回答
28 
-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;
  }
}
于 2017-10-17T05:04:17.980 回答
5

最好的方法似乎是将最终状态放在 css 的主要部分。像这里一样，我把宽度设置为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;}
}
于 2013-05-03T16:51:31.963 回答
3

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

于 2010-12-07T03:38:07.470 回答
1

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

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

您可以找出动画的各个方面，例如开始和停止，然后，一旦说“停止”事件已触发，您就可以对 dom 做任何您想做的事情。我前段时间试过这个，它可以工作，但我猜你暂时会被限制在 webkit 上（但你可能已经接受了）。顺便说一句，由于我为 2 个答案发布了相同的链接，所以我会提供这个一般性建议：查看 W3C - 他们几乎编写了规则并描述了标准。此外，webkit 开发页面非常关键。

于 2010-12-13T19:42:13.347 回答
0

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

于 2017-10-18T12:46:32.733 回答
-2

我今天了解到，填充模式有一个限制。这是来自 Apple 开发人员。谣言是 * 大约 * 六，但不确定。或者，您可以将类的初始状态设置为您希望动画结束的方式，然后 * 将其初始化为 from / 0% 。

于 2010-12-07T05:24:46.587 回答