stop css keyframe flip animation on moon like moon phases - html

Question

how to stop CSS keyframe flip animation on the moon
i have moon illumination in percent i want to display moonlight on moon base on the illumination. moon illumination one to hundred (1-100%) and moonlight should be 1-100% on the moon
for exe when moon illumination is 10% and white color (moon brightness) on the moon should be 10%
here html and css code of moon
.moon {
width: 100px;
height: 100px;
border: 2px solid #ffffff;
border-radius: 50%;
overflow: hidden;
position: relative;
background-color: #fff;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.moon::before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
background-color: #222;
width: 50%;
height: 100%;
-webkit-animation: flip 2s 1s steps(2) infinite alternate;
animation: flip 2s 1s steps(2) infinite alternate;
}
.disc {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
height: 100%;
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
.disc::before, .disc::after {
content: " ";
display: block;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
height: 100%;
border-radius: 50%;
transition: -webkit-transform 4s;
transition: transform 4s;
transition: transform 4s, -webkit-transform 4s;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.disc::before {
background-color: #222;
}
.disc::after {
background-color: #fff;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
#keyframes rotate {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
#-webkit-keyframes flip {
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes flip {
0% {
left: 0;
}
100% {
left: 100%;
}
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #222222;
text-align: center;
color: #ffffff;
font-family: 'Fira Mono', monospace;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: .1em;
}
<div class="moon">
<div class="disc"></div>
</div>

Answer 1

I think what you're getting at is that you want the animation to run once and then stop. If so, you should change your animations a bit. Specifically you need to:
Set the animation-fill-mode for .disc to forwards
Set the animation-iteration-count for .disc to 1
Change the rotate keyframes item to only rotate 180 degrees instead of 360.
Here's a codepen showing the complete solution. I deleted some unnecessary animations and removed the non-prefixed CSS for clarity/brevity.