触发关键帧动画而不使用js / jquery

Question

是否有选项可以在不使用js / jquery的情况下触发关键帧动画？ 我想过：悬停，但对我的目的来说有点复杂。

Answer 1

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

＆＃13;

＆＃13;

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!";
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;