<input id="input1" type="checkbox"></input>
<label for="input1">Click me</label>
<div></div>
div {
  position: absolute;
  height: 32px;
  width: 32px;
  background-color: red;
  transform: translate3d(0, 50px, 0);
  animation: default-move 2s infinite 0s;
}

@keyframes default-move {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  50% {
    transform: translate3d(400px, 50px, 0);
  }
  100% {
    transform: translate3d(0, 50px, 0);
  }
}

#input1:checked ~ div {
  animation:  default-move 2s infinite 0s, new-move 1s linear 0s 1 forwards;
}

@keyframes new-move {
  to {
    transform: translate3d(0, 100px, 0);
  }
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.