CSS3关于动画的问题，动画停止后让他的display等于none,再让他等于block就会出现动画重复问题。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3关于动画的问题，动画停止后让他的display等于none,再让他等于block就会出现动画重复问题。相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html>
<head>
<style>
div
width: 0px;
height: 0px;
border: 0px solid red;
animation: ceshi 5s ease;
-webkit-animation: ceshi 5s ease;
border-radius: 50%;
@-webkit-keyframes ceshi
from
border: 0px solid red;
to
border: 100px solid red;
@keyframes ceshi
from
border: 0px solid red;
to
border: 100px solid red;
</style>
<script>
function setCss3Evt(obj,name,fn)//为CSS3添加动画监听器
obj.addEventListener(name,fn,false);//FF和IE浏览器
var newName = name.replace("a","A");
newName = "webkit"+newName.replace("e","E");
obj.addEventListener(newName,fn,false);//Chrome和Opera浏览器
window.onload=function()
var div1 = document.getElementById("div1");
var yincang = document.getElementById("yincang");
var xianshi = document.getElementById("xianshi");
xianshi.onclick=function()
div1.style.display="block";
;
yincang.onclick=function()
div1.style.display="none";
;
setCss3Evt(div1,"animationend",function()
div1.style.border="100px solid red";
);
;
</script>
</head>
<body>
<button id="yincang">隐藏</button>
<button id="xianshi">显示</button>
<div id="div1">
</div>
<div>
等动画停止了，点击隐藏后再点击显示，在chrome和Opera浏览器下会出现重复动画
的问题（应该是保持上一次动画结束时候的状态才对）
</div>
</body>
</html>
代码如上
1.fadeIn（速度，[回调]）通过改变所有匹配元素的不透明度来实现淡入效果，并在动画可选地触发一个回调函数后完成。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：三种预定速度字符串（“慢”，“正常”或“快速”）长的毫秒数值（如：1000）的一个表示动画或
回调（功能）：（可选）（可选）例如600毫秒缓慢淡入一段
代码：$（“P”）淡入（“慢“）;
用200毫秒快速褪色的段落，然后会弹出一个对话框jQuery代码：。“动画完成”$（“P”）淡入（“快”，函数（）
警报（ ）;
）;
2.fadeOut（速度，[回调]）通过改变不透明度来实现所有匹配淡入淡出效果的元素，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：三种预定速度字符串（“慢”，“正常”或“快速”）长的毫秒数值（如：1000）的一个表示动画或
回调（功能）：（可选）功能例如与段落600毫秒缓慢褪色
代码：$（“P”）。淡出（“慢”）;
200毫秒段对话
代码后迅速褪色。 $（“P”）淡出（“快”，函数（）
警报（“动画完成。”）;
）;
3.fadeTo（速度，透明度，[回调]），所有匹配的元素逐步调整到指定的不透明度，并可选地触发一个回调函数完成动画后的不透明度。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：表示动画或
不透明度（：三种预定速度弦长的毫秒值（1000例）（“慢”，“正常”或“快速”）之一号）：调整0和1）的回调（功能）之间的不透明度值（数。 （可选）功能 600毫秒，以缓慢调整到0.66段，能见度的透明度有关的
码2/3。 $（“p”）的fadeTo（“慢”，0.66）; $（“P”）。fadeTo（“慢”，0.66）;
同款200毫秒快速调整到0.25，能见度约1/4的透明度，然后会弹出一个对话框jQuery代码：$（“P”）。 fadeTo（“快”，0.25，函数（）
警报（）“动画完成。”;
）;追问
我这里是CSS3的知识和应用，这里是CSS3动画中的一个问题，fadeIn这几个函数是淡入淡出，我知道。我要的是我这个的解决办法，或者问题所在。这个问题是我应用CSS3中的transform和animation配合时出现的问题。希望能给我解答
本回答被提问者采纳如何在路径上的特定位置停止 CSS 动画。没有时间
【中文标题】如何在路径上的特定位置停止 CSS 动画。没有时间【英文标题】：How to stop CSS Animation in Specific place on the Path. Without Timing 【发布时间】：2021-05-08 02:25:56 【问题描述】：如何在 50% 处停止动画 2 秒然后恢复原路##
附注setInterval 方法不合适！！！！
function pausee()
document.getElementById("0").style.animationPlayState = "paused";
;var myStop = setInterval(pausee, 2200);
function Runn()
document.getElementById("0").style.animationPlayState = "running";
; var myContinue = setInterval(Runn, 2600);
<div id="SpinningImages" class="SpinningImages">
</div>
<div id="BigCircle" >
</div>
</div>
`
var x = document.createElement("IMG");
x.setAttribute("src", imgArray[0].src);
x.classList.add("ball");
x.setAttribute("id", "0");
x.setAttribute("style", "animation: FourthBallStarting 2s linear normal infinite;");
x.setAttribute("alt", "Image");
x.style.animationFillMode = "forwards";
document.getElementById("SpinningImages").appendChild(x);
`
【问题讨论】：
你需要将它包含在你的关键帧中，这就是它们的用途。 将其构建到您的关键帧中 - 只需更改 %s 以便在某个 % （取决于整个运行的时间）上没有任何变化，直到另一个 % - 然后内置您的 2s 暂停而且你不必在运行时做任何事情。 谢谢它的工作原理！另外我想知道是否可以在路径上获得动画的确切位置？ （百分比）由 JS 提供 【参考方案1】：这有帮助吗？
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'images/img/Splash_image1.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'images/img/Splash_image2.jpg';
/* ... more images ... */
imgArray[5] = new Image();
imgArray[5].src = 'images/img/Splash_image6.jpg';
var x = document.createElement("IMG");
x.setAttribute("src", imgArray[0].src);
x.classList.add("ball");
x.setAttribute("id", "0");
x.setAttribute("style", "animation: FourthBallStarting 2s linear normal infinite;");
x.setAttribute("alt", "Image");
x.style.animationFillMode = "forwards";
document.getElementById("SpinningImages").appendChild(x);@keyframes FourthBallStarting
0%
offset-distance: 0%;
visibility: hidden;
transform: rotateZ(0);
opacity: 0;
12.5%
offset-distance: 3%;
opacity: 1.0;
visibility: visible;
15%
offset-distance: 3%;
opacity: 1.0;
visibility: visible;
50%
offset-distance: 3%;
opacity: 1.0;
visibility: visible;
80%
transform: 0;
90%
offset-distance: 23%;
opacity: 1;
visibility: visible;
99%,100%
offset-distance: 25%;
visibility: hidden;
transform: rotateZ(-90deg);
opacity: 0;
.ball
position: absolute;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%;
border: 1px solid black;
animation-fill-mode: forwards;
offset-path: path("M445 1.5C503.241 1.5 560.912 12.9715 614.72 35.2594C668.528 57.5474 717.419 90.2154 758.602 131.398C799.785 172.581 832.453 221.472 854.741 275.28C877.029 329.088 888.5 386.759 888.5 445C888.5 503.241 877.029 560.912 854.741 614.72C832.453 668.528 799.785 717.419 758.602 758.602C717.419 799.785 668.528 832.453 614.72 854.741C560.912 877.029 503.241 888.5 445 888.5C386.759 888.5 329.088 877.028 275.28 854.741C221.472 832.453 172.581 799.785 131.398 758.602C90.2152 717.419 57.5473 668.528 35.2593 614.72C12.9714 560.912 1.49997 503.241 1.5 445C1.50003 386.759 12.9715 329.088 35.2595 275.28C57.5475 221.472 90.2155 172.581 131.398 131.398C172.581 90.2152 221.472 57.5473 275.28 35.2593C329.088 12.9714 386.759 1.49996 445 1.5L445 1.5Z");
margin-left: -410px;
`<div id="SpinningImages" class="SpinningImages">
</div>
<div id="BigCircle" >
</div>【讨论】：
是的，好主意！谢谢。另外我想知道是否可以在路径上获得动画的确切位置？ （百分比）由 JS 提供以上是关于CSS3关于动画的问题，动画停止后让他的display等于none,再让他等于block就会出现动画重复问题。的主要内容，如果未能解决你的问题，请参考以下文章
CSS3的transform属性，怎么才能让他同时执行两个动画