Kukhonjiswa imibuzo ethegiwe: Veza yonke imibuzo

Why my code work fine on chrome but not firefox?

Here is my code: <html> <head> <meta charset="utf-8"> <style> .fullCard, .lowerHalfCard, .upperHalfCard, .fullCard-after, .lo… (funda kabanzi)

Here is my code:

<html>
	<head>
		<meta charset="utf-8">
		<style>
			.fullCard,
			.lowerHalfCard,
			.upperHalfCard,
			.fullCard-after,
			.lowerHalfCard-after,
			.upperHalfCard-after {
			  background-color: inherit;
			  border-radius: 10px;
			  height: 100%;
			  width: 100%;
			  position: absolute;
			  
			  align-items: center;
			  display: flex;
			  justify-content: center;
			  vertical-align:middle;
			}
		
			.fullCard-after::after,
			.upperHalfCard-after::after{
			  content: "";
			  display: block;
			  position: absolute;
			  height: 4px;
			  background-color: inherit;
			  width: 100%;
			  top: calc(50% - 2px);
			}
			.lowerHalfCard-after::after{
			  content: "";
			  display: block;
			  position: absolute;
			  height: 4px;
			  background-color: inherit;
			  width: 100%;
			  top: calc(50% - 2px);
			}
			.lowerHalfCard,
			.lowerHalfCard-after{
				clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
			}
			.upperHalfCard,
			.upperHalfCard-after{
			  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
			}

			.splitFlap {
			  background-color:black;
			  box-sizing: border-box;
			  border-radius: 10px;				
			  width: 100px;
			  height: 150px;
			  position: relative;			 
			}

			.rotate0to90 {
			  animation-name: r0to90;
			}

			.rotate90to0 {
			  animation-name: r90to0;
			}

			.rotate0to_90 {
			  animation-name: r0to_90;
			}

			.rotate_90to0 {
			  animation-name: r_90to0;
			}

			.rotate0to90,
			.rotate90to0,
			.rotate0to_90,
			.rotate_90to0 {
			  animation-duration: 0.3s;
			  animation-fill-mode: forwards;
			}

			@keyframes r0to90 {
			  from {
				transform:rotateX(0deg);
			  }

			  to {
				transform: rotateX(90deg);
			  }
			}

			@keyframes r90to0 {
			  from {
				transform: rotateX(90deg);
			  }

			  to {
				transform: rotateX(0deg);
			  }
			}

			@keyframes r0to_90 {
			  from {
				transform: rotateX(0deg);
			  }

			  to {
				transform: rotateX(-90deg);
			  }
			}

			@keyframes r_90to0 {
			  from {
				transform: rotateX(-90deg);
			  }

			  to {
				transform: rotateX(0deg);
			  }
			}

			.transform0to_90 {
			  transform: rotateX(-90deg);
			}

			.transform0to90 {
			  transform: rotateX(90deg);
			}
			.hide{
				display:none
			}
			.zIndex2 {
			  z-index: 2;
			}

			.zIndex4 {
			  z-index: 4;
			}

			.zIndex10 {
			  z-index: 10;
			}
			.blue{
			   background-color: blue
			}
			.green{
			   background-color: green
			}
			.red{
			   background-color: red
			}
			.orange{
			  background-color: orange
			}
		</style>
		<script>
			let baseDiv,lowerDiv,middleDiv,upperDiv;
			document.addEventListener("DOMContentLoaded",()=>{
				baseDiv=document.getElementById("base");
				lowerDiv=document.getElementById("lower");
				middleDiv=document.getElementById("middle");
				upperDiv=document.getElementById("upper");
			});
			let backward=()=>{
			    middleDiv.innerHTML=baseDiv.innerHTML;
				lowerDiv.classList.add("rotate0to90");
				middleDiv.className="upperHalfCard-after transform0to_90 zIndex4";
			}
			let forward=()=>{
				middleDiv.innerHTML=baseDiv.innerHTML;
				upperDiv.classList.add("rotate0to_90");
				middleDiv.className="lowerHalfCard-after transform0to90 zIndex4";
			}
			
			let upperHandler=()=>{
				middleDiv.classList.add("rotate90to0");
				upperDiv.classList.replace("zIndex4","zIndex2");				
			}
			let lowerHandler=()=>{
				lowerDiv.classList.replace("zIndex4","zIndex2");
				middleDiv.classList.add("rotate_90to0");				
			}
			let middleHandler=()=>{
				upperDiv.innerHTML=baseDiv.innerHTML;
				lowerDiv.innerHTML=baseDiv.innerHTML;
				middleDiv.className="hide";
				upperDiv.className="upperHalfCard-after zIndex4";
				lowerDiv.className="lowerHalfCard-after zIndex2";
			}
		</script>
	</head>
	<body>
		<div class="splitFlap">
			<div 
				id="base" 
				class="fullCard-after zIndex2">
				<img src="img/1_100.png">
			</div>
			<div 
				class="upperHalfCard-after zIndex4"
				id="upper"
				onAnimationEnd="upperHandler()">
				<img src="img/0_100.png">
			</div>
			<div 
				id="middle"
				class="hide"
				onAnimationEnd="middleHandler()">
			</div>
			<div
				class="lowerHalfCard-after zIndex2" 
				id="lower"
				onAnimationEnd="lowerHandler()">
				<img src="img/0_100.png">
			</div>
		</div>
		<p>
			<button onClick="forward()">
			  +
			</button>
			<button onClick="backward()">
			 -
			</button>
			<button onClick="setHinge()">Set Hinge</button>
		</p>
	</body>
</html>	

I am creating a split-flap. It works fine in Chrome, but in firefox, during the second rotation period, it is not smooth as in chrome. How can I fix it?

Asked by knvbhk 4 ezinsukwini ezidlule