<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: new-move 1s 1 0s forwards;
}
@keyframes new-move {
to {
transform: translate3d(0, 100px, 0);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.