css - 无需 js/jquery 即可触发关键帧动画

Question

是否有一个选项可以在不使用 js/jquery 的情况下触发关键帧动画？我考虑过 :hover，但对于我的目的来说它会有点复杂。

Answer 1

想要这样的东西吗？这是没有 JavaScript 我能做的最好的事情!虽然我玩得很开心。

input[type=checkbox] {
  opacity: 0;
}

input[type=checkbox] + label{
  width:100px;
  height:40px;
  border:thin solid black;
  display:block;
}

input[type=checkbox] + label:before {
  content: "Run Baby!";

}
input[type=checkbox]:checked + label:before {
  content: "Come back!";
}
.run {
  width: 150px;
  line-height: 70px;
  font-size: 12px;
  border: thin solid red;
  transition: all 5000ms ease;
  position: absolute;
  left: 10px;
  top: 100px;
}
.run:before {
  content: "I wanna go right ->";
}
input[type=checkbox]:checked + label + .run {
  left: 400px;
}
input[type=checkbox]:checked + label + .run:before {
  content: "Hey! Look at me go!";
}

<input id="nice" type="checkbox">
<label for="nice">
</label>

<div class="run"></div>