在最后一帧停止 CSS3 动画

Question

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

Answer 1

您正在寻找：

animation-fill-mode: forwards;

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

Answer 2

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

animation-name - default <代码>无

动画持续时间 - 默认 0s

动画计时功能 - 默认 轻松

动画延迟 - 默认 0s

动画迭代计数 - 默认 1

动画方向 - 默认 正常

动画-fill-mode - 您需要将其设置为 forwards

animation-play-state - 默认 running

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

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

请参阅MDN 文档位于此处

Answer 3

-webkit-animation-fill-mode：转发； /* Safari 4.0 - 8.0 */
动画填充模式：向前；

浏览器支持

• 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;
  }
}

Answer 4

最好的方法似乎是将最终状态放在 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;}
}  

Answer 5

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

Answer 6

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

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

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

Answer 7

实际上没有人这样做，它的工作方式是 animation-play-state 设置为暂停。

Answer 8

我今天了解到填充模式有一个限制。这是来自苹果开发者的。传言是 * 左右 * 六，但不确定。
或者，您可以将类的初始状态设置为您希望动画结束的方式，然后在 from / 0% 处初始化它。