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;

More info on MDN和canIuse上的浏览器支持列表。

Answer 2

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

Answer 3

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

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

我今天了解到你想要用于填充模式的限制。这是来自Apple开发者。谣言大约是*六，但不确定。或者，您可以将类的初始状态设置为您希望动画结束的方式，然后*从/ 0％初始化*它。

在最后一帧停止CSS3动画

8 个答案: