console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<style> 
div
{
	width:100px;
	height:100px;
    line-height:100px;
    text-align:center;
	background:yellow;
}


	
.frames {
  animation: rotation 8s ease-in-out infinite;
}
@keyframes rotation {
	/*
		可以修改animation的s值来调整停留速度，而不要去修改@keyframes里的架构
	*/ 
  0% {
    transform: rotateX(0deg);
  }
  /* 这里%值和旋转速度成正比。但要小于下一帧的值 */
  45% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(360deg);
  }
  /* 这里%值和旋转速度成正比。但要小于下一帧的值 */
  95% {
    transform: rotateX(360deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
	
	
	
</style>
</head>
<body>



<!-- <div id="div1" class="frames">旧数据</div> -->
<div id="div1">旧数据</div>
	</br>
<!-- <div id="x">0,true</div> -->

	<script>
        setTimeout(()=>{$('#div1').addClass('frames')},2500)
		var isOld = true;
		// var sum = 0;
		//8000对应的是animation的8s，固定*0.5不变
		var rate = 8000*0.5;
		setInterval(()=>{
				if(isOld){
				  $("#div1").text('新数据')
					isOld = false
				}else{
				  $("#div1").text('旧数据')
					isOld = true
				}
				// sum++;
				// $('#x').text(sum.toString()+','+isOld.toString());
		},rate)
	</script>
</body>
</html>