使CSS动画不重新启动
要使CSS动画不重新启动，可以使用以下方法：
- 使用animation-fill-mode属性：将animation-fill-mode属性设置为forwards。这将使动画在完成后保持在最后一个关键帧的状态，而不会返回到初始状态重新启动。例如：
.animation {
animation-name: myAnimation;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes myAnimation {
0% { opacity: 0; }
100% { opacity: 1; }
}- 使用animation-play-state属性：将animation-play-state属性设置为paused。这将暂停动画的播放，使其保持在当前状态，而不会重新启动。例如：
.animation {
animation-name: myAnimation;
animation-duration: 2s;
animation-play-state: paused;
}
@keyframes myAnimation {
0% { opacity: 0; }
100% { opacity: 1; }
}- 使用JavaScript控制动画：通过JavaScript代码来控制动画的播放状态。可以使用Element对象的style属性来修改animation-play-state属性，将其设置为paused或running来暂停或播放动画。例如：
var element = document.getElementById("myElement");
element.style.animationPlayState = "paused";以上是使CSS动画不重新启动的几种方法。根据具体的需求和场景，选择适合的方法来实现动画的控制和保持状态。
相关·内容
1回答
使CSS动画不重新启动
、、、、
我正在写一个网站，在一个球体上开始缩放动画，我在悬停时也有一个摇晃动画，但当我完成悬停时，缩放动画开始。所以我需要一些代码的帮助来阻止动画在悬停后重新启动。
浏览 21提问于2019-07-18得票数 0
2回答
如果有逗号分隔的值来声明多个CSS3动画，那么如何重新启动整个动画本身？首先运行slideUp，然后运行fadeOut (使用animation-delay属性使之成为可能)，然后重新启动所有这些。
浏览 3提问于2015-03-01得票数 0
回答已采纳
关于如何解决与jQuery、addClass() + removeClass()和CSS3动画/转换相关的具体问题，有很多问题。一般来说，我关心的是做以下事情的最佳方法：
具体来说，我有一些正在使用的动画类，这些类可以在中检查。在小提琴中，我定义了使用opacity和max-height提供“出现”和“消失”动画的类。当小提琴开始
浏览 3提问于2015-08-13得票数 2
回答已采纳
2回答
很多人需要重新启动他们的CSS3动画；而我想要的恰恰相反：单击Add all，让动画播放几秒钟，然后单击shuffle:任何移动的节点都会重新启动动画。
浏览 0提问于2013-01-23得票数 3
2回答
我有一个gif动画，将永远循环。但是，我不希望它总是可见，所以我最基本需要的是给动画3秒来运行一次，然后隐藏它，并在10秒后使它再次可见3秒。script type="text/javascript">
$('#bird').css('display', 'none'):
浏览 3提问于2012-01-04得票数 1
回答已采纳
我试图让动画在一个小角度的应用程序中工作。<button value="val" ng-click="toggle=!toggle">cont</button>我得到的CSS，使“推动者”，一个小方块，消散，内
浏览 0提问于2014-08-08得票数 1
rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css
浏览 2提问于2015-01-07得票数 0
1回答
我希望用CSS转换来调整元素的大小，然后将元素重置为原来的大小，然后重新启动动画。下面是代码：$('#Bar').css('-webkit-transition', 'none');$('
浏览 5提问于2014-12-03得票数 0
回答已采纳
我有一个css格式的div： display:none; height:100px;$("#display_command").click(function(e) { $
浏览 2提问于2014-03-28得票数 0
同样的悬停，我想要一个动画效果。问题是，动画效果发生在图像和覆盖上，但我不希望动画效果发生在覆盖层上。 <div class=“extra-l
浏览 7提问于2019-12-20得票数 0
我检查过其他有相同动画的网站，做同样的技术，比如move move， on setInterval()。但我不知道它会不会好，在我的电脑上，它运行顺利。那么，在实施这类网站动画时，应该遵循哪些良好的做法呢？
浏览 0提问于2013-12-31得票数 2
回答已采纳
1回答
所以我有这些移动的动画框。它们无限地从底部移动到顶部。在他们登上顶峰后，他们会重新开始。我可以通过一些sass和它们的random()函数来改变它们的大小和速度。因此，我尝试使用javascript在每次动画时改变每个框的持续时间。似乎动画持续时间的改变会立即再次触发事件！所以一件东西可能有8s，然后它跳到20s，然后到5s。随着JS的启用，他们现在可以跳跃了，它是不稳定的。下面是一个代码：
浏览 2提问于2018-07-28得票数 1
1回答
我有一个CSS动画，我想通过点击按钮触发它，然后链接到另一个页面。是否也有一种方法，使动画不播放一次页面加载？提前感谢！<link rel="stylesheet" type="text/css" href="Test.cs
浏览 2提问于2014-04-29得票数 0
2回答
有没有可能创建一个webkit页面动画，这样当我单击一个链接转到另一个页面时，我可以使用两个单独的HTML文件，不使用AJAX，对新的内容页面进行左右擦除或左右擦除？只是一些特殊情况下的链接吗？额外的好处--也可以让它与mozilla页面动画一起工作。
浏览 6提问于2012-08-12得票数 0
回答已采纳
我想知道如何使动画复述后，在特定的页面。当您访问某个活动时，我的动画基本上会将RelativeLayout翻译成几个像素。但是，如果我单击一个将我发送到另一个页面上的按钮，然后单击back按钮返回，TranslationAnimation就不会重新启动。TranslateAnimation(0,0,-10f,0); a.setFillAfter(true);我如何使这个动画<em
浏览 0提问于2018-09-12得票数 0
回答已采纳
1回答
我使用https://animejs.com/库，我想为此创建按钮悬停动画。问题是:在一个按钮里面有一个SVG (箭头)，当鼠标移到按钮上时，我想要动画效果。但第二个，也是主要的问题:如果我悬停在按钮上，然后离开按钮，然后轻快地再次悬停这个按钮，动画就会从第一个位置开始。但我不希望这样，直到它仍然在SVG箭头上的第一个悬停动画是动画。(); });
}); 我想要这样的东西，但只有悬停的按钮：https://codepen
浏览 19提问于2019-02-01得票数 0
1回答
是否有一种方法可以重新启动CSS动画，而不需要克隆元素、重新生成DOM、等待(setTimeout/on动画结束)？
浏览 2提问于2017-11-02得票数 4
我知道我可以在CSS中使用动画和@keyframes，但是我想在下面解决这个问题。我想稍后使用clearInterval暂停这个动画(<- -但这不是我的问题)。 i=0; }setInterval(FunRotate, 1000);
编辑
浏览 3提问于2014-06-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
