个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我试图制作一个按钮来停止 css3 动画并再次启动它我试过这个功能object.style.animationPlayState="paused";
但问题是我想停止并从头开始重新运行它而不是从最后一个地方恢复它。
我还尝试在停止之前操作 object.style.left 值，也从它所在的最后一个位置开始。
我最后一次尝试是将计数设置为 0，但到目前为止没有成功
关于这个问题有什么想法吗？
代码
<html>
<head>
<title>Move 3 pic's</title>
</head>
<style>
#div1{position: relative; top:100px;}
#div2{position: relative ; top:100px;left:290px;}
#div3{position: relative ; top:250px; left:50px;}
#divmain
{
width: 400px; height:300px; border: 10px solid navy; margin: 5px;
}
.animate1
{
animation: movingdiv1 5s infinite alternate;
animation-timing-function:linear;
}
.animate2
{
animation: movingdiv2 5s infinite alternate;
animation-timing-function:linear;
}
.animate3
{
animation: movingdiv3 5s infinite alternate;
animation-timing-function:linear;
}
@-moz-keyframes movingdiv1
{
from {left: 0px;}
to {left: 300px;}
}
@-moz-keyframes movingdiv2
{
from {left: 300px;}
to {left: 0px;}
}
@-moz-keyframes movingdiv3
{
from {top: 240px;}
to {top: 0px;}
}
</style>
<script>
var x=0;
function start()
{
document.getElementById("div1").style.animationIterationCount="infinite";
document.getElementById("div2").style.animationIterationCount="infinite";
document.getElementById("div3").style.animationIterationCount="infinite";
if(x==1)
{
document.getElementById("start").value="Stop";
document.getElementById("div1").style.animationPlayState="running";
document.getElementById("div2").style.animationPlayState="running";
document.getElementById("div3").style.animationPlayState="running";
x=0;
}
else
{
document.getElementById("start").value="Start";
document.getElementById("div1").style.animationPlayState="paused";
document.getElementById("div2").style.animationPlayState="paused";
document.getElementById("div3").style.animationPlayState="paused";
x=1;
}
}
function reset()
{
/*what i tried here*/
document.getElementById("div1").style.animationPlayState="paused";
document.getElementById("div2").style.animationPlayState="paused";
document.getElementById("div3").style.animationPlayState="paused";
document.getElementById("div1").style.left="0px";
document.getElementById("div2").style.left="297px";
document.getElementById("div3").style.top="250px";
document.getElementById("div1").style.animationIterationCount="0";
document.getElementById("div2").style.animationIterationCount="0";
document.getElementById("div3").style.animationIterationCount="0";
}
</script>
<body>
<div id=divmain>
<span class="animate1" id=div1>
<img src="icon1.gif" id="icon1" width="50" height="50"/></span>
<span class="animate2" id=div2>
<img src="icon2.gif" id="icon2" width="50" height="50"/></span>
<span class="animate3" id=div3><img src="top.jpg" id="icon3" width="50" height="50"/></span>
</div>
<input id=start type=button onClick=start() value='Stop'>
<input id=reset type=button onClick=reset() value='Reset'>
</body>
最佳答案
如果您想从头开始重新运行动画，请删除动画属性中的“alternate”。
.animate1
{
animation: movingdiv1 5s infinite;
animation-timing-function:linear;
}
.animate2
{
animation: movingdiv2 5s infinite;
animation-timing-function:linear;
}
.animate3
{
animation: movingdiv3 5s infinite;
animation-timing-function:linear;
}
编辑:
可能我之前没有理解你的问题。每当单击按钮时，您想从头开始停止并重新运行它。为此，我修改了启动函数()。每当按下停止按钮时，动画类就会从移动的 div 中删除。当按下开始按钮时，将添加动画类。
function start()
{
document.getElementById("div1").style.animationIterationCount="infinite";
document.getElementById("div2").style.animationIterationCount="infinite";
document.getElementById("div3").style.animationIterationCount="infinite";
if(x==1)
{
document.getElementById("start").value="Stop";
document.getElementById("div1").className = "animate1";
document.getElementById("div2").className = "animate2";
document.getElementById("div3").className = "animate3";
x=0;
}
else
{
document.getElementById("start").value="Start";
document.getElementById("div1").className = "";
document.getElementById("div2").className = "";
document.getElementById("div3").className = "";
x=1;
}
}
关于javascript - 从头开始恢复动画 css3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27031710/
26
4
0
有什么方法可以恢复删除的元素吗？ 这是我删除元素的代码 myFunction() { var width = window.innerWidth; var February = doc
我有一个 TokuDB 表，由于某种原因缺少 ***_status.tokudb 文件。 我还不确定文件是否由于 TokuDB 崩溃而丢失。 问题是: 有没有办法从主要文件和关键文件(我可以从 tok
我正在 Windows 7 (x86) 上运行带有 Workbench 6.3.8 的 32 位 MySQL Server 5.7.22 本地实例(必须选择 32 位版本 - 所以，较旧的版本)。 我
1、备份 <% SQL="backup database 数据库名 to disk='"&Serve
1、ASP中怎么实现SQL数据库备份、恢复！ 答：asp在线备份sql server数据库： 1、备份 <% SQL="ba
我在 R 中使用 stats::filter 函数来理解 R 中的 ARIMA 模拟(如在函数 stats::arima.sim 中)和估计。我知道 stats::filter 将线性过滤器应用于向量
我已经浏览了示例应用程序的文档和代码，并发现 files/objectbox/objectbox/data.mdb 是存储所有数据的默认文件。 假设我的理解是正确的，我有几个问题找不到文档: 我想在我
为了恢复非续订订阅类型的 InAppPurchase，我已经实现了服务器来处理此问题。 但在购买过程中，iTunes 有时不会要求用户验证他们的卡详细信息， 在这种情况下，它会在后台发送应用程序并显示
我的问题是寻找cocos2d游戏期间暂停/恢复状态(包括所有需要保存的数据信息)的设计解决方案。 包括但不限于以下情况: 1).用户选择退出，然后弹出一个对话框供用户选择“直接退出”、“暂停”； 2)
在 Mercurial 中，我有一个旧的变更集，除了对单个文件的更改外，它都很好。我将如何恢复对该单个文件的更改？ 即使只是能够在上一个变更集中查看文件的状态也会很好，然后我可以剪切和粘贴。 我的 M
我的一项职能遇到了困难。我想做的是计时器在页面加载后立即启动，并且只有一个带有启动/恢复的按钮。我无法在代码中找出需要更改功能的位置。有人可以帮助我吗？谢谢! HTML: , Javascr
我正在阅读Scrap your type classes 。这为类型类提供了替代方案。然而，我被Paul Chiusano的评论所困扰。其中讨论了恢复 do 表示法 语法。 坦白说，我无法理解 ret
当 OrientDB 因某人重新启动机器而非正常关闭时，OrientDB 最终会处于数据恢复失败的状态。对于如何从这种不正常的关闭中正常恢复有什么建议吗？我们正在寻找系统在断电期间能够自行恢复的方法。
我正在构建一个 Electron 应用程序，如果发生崩溃，它必须重新加载渲染进程窗口。 目前我可以从主进程重新启动应用程序 app.relaunch(); app.quit(); 但我无法检测到窗口崩
我有 3 个 Activity ，比如说 MainActivity、 Activity 2 和 Activity 3。 在 MainActivity 中，我有一个按钮(开始/停止)，当我单击此按钮时，
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 关闭 11 年前。 Improve thi
Twilio 是否支持暂停和恢复内容播放。换句话说，我有相当长的文件将播放给调用者，并且我正在尝试找到一种方法来实现暂停和恢复功能。在播放某些内容的过程中，我希望用户能够按数字暂停，然后再次按数字从音
我已经提交了 A、B、C、D 和 E。我意识到在提交 B 中发生了一些非常糟糕的事情，所以我想回到 A，这次正确地进行之前搞砸了 B 的更改，然后重新应用 C 、 D 和 E 自动。 您可能想知道为什
我的一个文件被“标记为文本”，图标也发生了变化。实际上这是一个 PHP 文件。我尝试过使用 Help -> Find Action -> Mark As 尝试将其恢复为 PHP 突出显示，但它不起作用
我有一些 SSE 程序，可以将循环中的内存归零，当指针未对齐时，它会引发 SIGSEGV进入我的处理程序。我可以在此类处理程序中获取更多信息吗例行公事，现在我不知道它是在哪里完成的，我也可以吗以某种可
我是一名优秀的程序员,十分优秀！