Question

我试图制作一个停止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>

Answer 1

如果要从头开始重新运行动画，请删除动画属性中的“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;
}

编辑：

也许我之前没有理解你的问题。只要单击按钮，您就想从一开始就停止并重新运行它。为此，我修改了start函数（）。每当按下“停止”按钮时，动画类将从移动的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;
    }   
 }

从头开始恢复动画css3

1 个答案: