Repeat css animation with checkbox

Question

Is it possible to run again css animateion without js?

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

When checkbox is checked i want to run again my animation?

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

enter link description here

Please have a look at my answer [here](http://stackoverflow.com/questions/33347992/reuse-css-animation-in-reversed-direction-by-resetting-the-state/33351228#33351228). Your question is different but the point would be the same. You can't restart an animation with CSS alone. — Harry, Nov 12 '15 at 14:28
@FabrizioCalderan: I think OP wants the animation to run once on load and then again when the input is checked. — Harry, Nov 12 '15 at 14:29
You can if you [duplicate the `keyframes` block and give it a different name and use that name in the `:checked` rule](http://codepen.io/anon/pen/XmoXEE) (tested on Chrome). Depending on your use case this may or may not be desirable. The animation then runs when the page loads and on every change of the checkbox. — Dark Falcon, Nov 12 '15 at 14:34

score 1 · Accepted Answer · edited May 23 '17 at 12:30

I've been trying to solve your issue with just one keyframe declaration.

As DarkFalcon points out you can solve it by declaring two different keyframes and apply one for the :checked and the other for the initial state.

Code Snippet

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

If I find another way around this, where you don't need two declared keyframes I'll update my answer.

Repeat css animation with checkbox

1 Answers1

Code Snippet