Question

我有一个我正在进行的项目，最终结果将显示一个阳光明媚的字段，以及一个显示“让它下雨”的复选框。点击太阳落下的按钮，云将进入，将有动画css雨。我现在正在研究太阳的动画并且知道我想要它的方式。我正在使用一个已检查的伪类来启动雨动画和太阳的旋转。我遇到的问题是我不知道如何反转未检查状态的动画。

因此页面应该处理的顺序如下：

页面加载，默认未选中状态按钮，sun应该是
用户点击按钮，pseudo class:checked被激活，动画开始
用户再次点击按钮，因此取消选中按钮，动画应该反转到原始状态。

现在，当按钮取消选中时，它只会重置整个页面。有没有办法在不使用任何JavaScript的情况下将动画反转为原始状态？这个项目只是CSS。

以下是codepen

以下是一些HTML：

<input class="rainsun" type="checkbox">
<div class="sky">
</div><!--end sky-->
<div class="sun_path">
    <div class="sun"></div>
</div><!--end sun_path-->
<div class="grass">
</div><!--end grass-->

和动画的CSS：

/*animations*/
.rainsun:checked ~ .sun_path {
  -webkit-animation: spin-right 3s 1 forwards;
  -moz-animation: spin-right 3s 1 forwards;
  animation: spin-right 3s 1 forwards;

}
/* keyframes */
@-webkit-keyframes spin-right {
    100% {
        -webkit-transform: rotate(180deg);
    }
}
@-moz-keyframes spin-right{
    100% {
      -webkit-transform: rotate(180deg);
    }
}

您可以点击codepen link。

Answer 1

尝试使用keyframes并设置transform，而不是使用transition: transform。以下是我所谈论的一个例子：

.rainsun ~ .sun_path {
  -webkit-transition: -webkit-transform 3s;
  -moz-transition: -moz-transform 3s;
  transition: transform 3s;
}

.rainsun:checked ~ .sun_path {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

如何在未选中状态下反转CSS动画？

1 个答案:

Codepen Fork：Demo