从“开始”屏幕恢复动画 CSS3

resume animation css3 from start

本文关键字：恢复 动画 CSS3 屏幕 开始      更新时间：2023-09-26

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

如果要

从头开始重新运行动画，请删除动画属性中的"备用"。

.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;
    }   
 }
相关文章：