stop css keyframe flip animation on moon like moon phases

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>

What do you mean by `when moon illumination is 10% and white color on the moon should be 10%`? Is it the brightness of moon? — chintuyadavsara, Oct 08 '18 at 05:14
By using `animation-play-state: paused;` you can stop and start the animation. [Example](http://jsfiddle.net/8mtzxop6/1/). Handling the %'s is the next step of course! — Frish, Oct 08 '18 at 05:20
You could use JavaScript for controlling animation and set parameters inline. So that you control the value of the animation. However, you'll need to set transition so that it would be animated smoothly. — Sergey, Oct 08 '18 at 05:20
Looks like you can [set the animation progress with CSS](https://stackoverflow.com/questions/29774433/can-i-set-the-progress-of-a-keyframe-animation-to-a-specific-stage) using `animation-delay` and a negative number. — Frish, Oct 08 '18 at 05:27

score 0 · Answer 1 · answered Nov 07 '18 at 19:38

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.

stop css keyframe flip animation on moon like moon phases

1 Answers1