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

Posted 2023-03-06

【中文标题】在月亮上停止 css 关键帧翻转动画，如月相

【英文标题】：stop css keyframe flip animation on moon like moon phases

【发布时间】：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 来控制动画并内联设置参数。让你控制动画的值。但是，您需要设置过渡以使其动画流畅。

如何调节亮度？

【参考方案1】：

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

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

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