在月亮上停止 css 关键帧翻转动画，如月相答案

【问题标题】：stop css keyframe flip animation on moon like moon phases在月亮上停止 css 关键帧翻转动画，如月相
【发布时间】：2019-03-12 17:36:02
【问题描述】：

如何在月球上停止 CSS 关键帧翻转动画

我有以百分比表示的月光照明，我想根据照明在月球上显示月光。月亮照度一到一百（1-100%），月亮上的月光应该是1-100%

当月亮照度为 10% 且月亮上的白色（月亮亮度）应为 10% 时的 exe

这里是moon的html和css代码

.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>

【问题讨论】：

when moon illumination is 10% and white color on the moon should be 10% 是什么意思？是月光吗？
是的意思是亮度
使用animation-play-state: paused;可以停止和启动动画。 Example。处理 %'s 是当然的下一步！
您可以使用 JavaScript 来控制动画并内联设置参数。让你控制动画的值。但是，您需要设置过渡以使其动画流畅。
如何调节亮度？

标签： html css animation keyframe

【解决方案1】：

我认为您的意思是您希望动画运行一次然后停止。如果是这样，你应该稍微改变一下你的动画。具体来说，您需要：

将.disc 的animation-fill-mode 设置为forwards
将.disc 的animation-iteration-count 设置为1
将rotate 关键帧项更改为仅旋转180 度而不是360 度。

Here's a codepen 显示完整的解决方案。为了清晰/简洁，我删除了一些不必要的动画并删除了无前缀的 CSS。

【讨论】：