Question

是否可以在没有js的情况下再次运行css animateion？

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

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

np.fromstring

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

用复选框重复css动画

1 个答案:

代码段