用复选框重复css动画答案

【问题标题】：Repeat css animation with checkbox用复选框重复css动画
【发布时间】：2015-11-13 00:13:02
【问题描述】：

没有js是否可以再次运行css动画？

@-webkit-keyframes aaa {
  to {
    background: red;
  }
}
input:checked + div {
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: aaa;
  -webkit-animation-duration: 1s;
}
div {
  width: 100px;
  height: 100px;
  background:blue;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-name: aaa;
  -webkit-animation-duration: 1s;
}

选中复选框后，我想再次运行我的动画吗？

<input type="checkbox" />
<div></div>

enter link description here

【问题讨论】：

喜欢吗？ codepen.io/anon/pen/NGexXr
请看我的回答here。你的问题是不同的，但重点是一样的。您不能仅使用 CSS 重新启动动画。
@FabrizioCalderan：我认为 OP 希望动画在加载时运行一次，然后在检查输入时再次运行。
如果你duplicate the keyframes block and give it a different name and use that name in the :checked rule（在 Chrome 上测试），你可以。根据您的用例，这可能是可取的，也可能不是可取的。然后动画在页面加载时以及复选框的每次更改时运行。

标签： css animation

【解决方案1】：

我一直在尝试仅通过一个关键帧声明来解决您的问题。

正如DarkFalcon 指出的那样，您可以通过声明两个不同的keyframes 并将一个应用于:checked 并将另一个应用于初始状态来解决它。

代码片段

@keyframes aaa {
  to {
    background: red;
  }
}
@keyframes bbb {
  to {
    background: red;
  }
}

input:checked + div {
  animation-name: bbb;
}
div {
  width: 100px;
  height: 100px;
  background:blue;
  animation-fill-mode: forwards;
  animation-name: aaa;
  animation-duration: 1s;
}

<input type="checkbox" />
<div></div>

如果我找到另一种解决方法，您不需要两个声明的关键帧，我会更新我的答案。

【讨论】：