html - :not does not work for animation on uncheck

Question

我创建了一个小切换开关。我使用隐藏的复选框和以下 CSS

input[type=checkbox]:checked ~ div {
  animation-name: slide;
  animation-duration: 350ms;
  margin-left: 32px;
}

和 HTML

<input type="checkbox" id="checkbox" />
<div class="knob">
  <div class="knob inside"> | </div>
</div>

完整代码笔:https://codepen.io/anon/pen/eZKyzK

而且很明显，以下是行不通的:

input[type=checkbox]:not(:checked) ~ div {
  animation-name: slide;
  animation-duration: 350ms;
  animation-direction: reverse;
  margin-left: 32px;
}

因为进入状态当然是:not(:checked)。但我不想让动画开始。第二个问题是动画只会播放一次。有没有办法实现开关行为: 1.跳过第一个动画 2. 每次复选框状态改变时播放动画，而不是只播放一次

Answer 1

1. 每次复选框状态改变时播放动画

添加了一个新的倒车动画。它确实有效。

@keyframes slideBack {
    from {
      margin-left: 32px;
    }
    to {
      margin-left: 0px;
    }
}

同样在您分享的 codepen 链接中，请更改此链接，

input[type=checkbox]:not(:checked) ~ div {
  animation-name: slideBack;
  animation-duration: 350ms;
  margin-left: 0px;
}