CODEWITHSUNDEEP
cssanimation
sall brown
sall brown

Reputation: 135

Repeat css animation with checkbox

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

Upvotes: 1

Views: 1141

Answers (1)

MMachinegun
MMachinegun

Reputation: 3074

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.

Upvotes: 1

Related Questions