css3动画动一次就停止,css - 在最后一帧停止CSS3动画

css - 在最后一帧停止CSS3动画

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

}

8个解决方案

321 votes

您正在寻找：

animation-fill-mode: forwards;

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

Duopixel answered 2019-04-29T17:42:05Z

14 votes

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

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 您需要将此项设置为running

animation-play-state - 默认running

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

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

请在此处查看MDN文档

davnicwil answered 2019-04-29T17:43:06Z

10 votes

-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-)

Safari 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 answered 2019-04-29T17:44:06Z

5 votes

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

}

Optimus Prime answered 2019-04-29T17:44:31Z

3 votes

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

jfriend00 answered 2019-04-29T17:44:57Z

1 votes

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

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

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

Jesse answered 2019-04-29T17:45:36Z

0 votes

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

Marco answered 2019-04-29T17:46:01Z

-2 votes

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

iheartflex answered 2019-04-29T17:46:26Z