keyframe 相关问题

我有一个关键帧动画，它会在某些事件后改变颜色，但我不知道如何在事件完成后停止动画？ HTML（只是为了调用事件）：我有一个关键帧动画，它会在某些事件发生后改变颜色，但我不知道如何在事件结束后停止动画？ HTML（只是调用事件）： <div id="prt1"></div> <div id="prt2"></div> <div id="prt3"></div> CSS（只是样式和关键帧动画）： #prt1 { height:20%; width:5%; border:1px solid black; top:50%; left:0%; animation:prt1 2s infinite; -webkit-animation:prt1 2s infinite; display:none; } @keyframes prt1 { 0% {background-color:white;} 33% {background-color:black;} 66% {background-color:white;} 100% {background-color:white;} } @-webkit-keyframes prt1 { 0% {background-color:white;} 33% {background-color:black;} 66% {background-color:white;} 100% {background-color:white;} } #prt2 { height:30%; width:5%; border:1px solid black; left:0%; top:50%; animation:prt2 2s infinite; -webkit-animation:prt2 2s infinite; display:none; } @keyframes prt2 { 0% {background-color:white;} 33% {background-color:white;} 66% {background-color:black;} 100% {background-color:white;} } @-webkit-keyframes prt2 { 0% {background-color:white;} 33% {background-color:white;} 66% {background-color:black;} 100% {background-color:white;} } #prt3 { height:49%; width:5%; border:1px solid black; left:0%; top:50%; animation:prt3 2s infinite; -webkit-animation:prt3 2s infinite; display:none; } @keyframes prt3 { 0% {background-color:white;} 33% {background-color:white;} 66% {background-color:white;} 100% {background-color:black;} } @-webkit-keyframes prt3 { 0% {background-color:white;} 33% {background-color:white;} 66% {background-color:white;} 100% {background-color:black;} } 您需要设置animation-iteration-count： animation-iteration-count: 1; 更多详情，请看： https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count ...和： http://css-tricks.com/snippets/css/keyframe-animation-syntax/ 您提供的有关问题的信息非常有限。此解决方案可能不是您正在寻找的。为您的问题添加更多细节，如有必要，我会更新此答案。供应商前缀：您可以添加供应商前缀（-webkit-、-moz-、-o-），例如-webkit-animation-iteration-count: 1; browser support 并针对允许为它们设置自定义值的特定浏览器。 .class { animation: rotation 1s forwards; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } 无限的反义词是向前。有点合并@user7253564 和@MarkusHofmann 的答案。对于将来访问这里的任何人。对我的案例有用的是： .fade { animation: fade 1.5s forwards; } animation-iteration-count: 1 在关键帧完成后无法停止动画。而不是 animation-iteration-count，您应该使用 animation-fill-mode: forwards; 在关键帧循环结束后停止动画。查看 animation 属性的 MDN 参考here 查看 animation-fill-mode 属性的 MDN 参考here 我希望这可以帮助需要它的人。在我的例子中，我使用了 animationPlayState 属性来暂停它。 $("#animatedDiv").css("animationPlayState","paused");

css animation keyframe

回答 4 投票 0

CSS动画关键帧计算

我正在制作一个css文字滑块动画。我在关键帧计算方面遇到了问题，因为在计算时有一点停顿。

css css-animations keyframe

回答 1 投票 0

我如何使用popmotion pure从关键帧旋转，转换和缩放矩形？

如何使用popmotion pure使最后一个关键帧将我的矩形旋转成35deg的角度？ https:/codepen.iomatthewharwoodpenXWmRPaK?editors=1111 HTML。

javascript animation keyframe popmotion

回答 1 投票 1

只使用纯CSS触发元素上的动画，并指定其关键帧。

我想使用纯css在元素的点击时触发一些动画。我已经为这个类容器分配了关键帧。有一个标签，所以当我点击这个，容器的动画... ...