动画在CSS不工作

Question

我想在按钮点击时滑动页面中央的块,3秒后它应该这样.但它没有滑动但突然没有滑动.

input{display:none}
.ani
{
  width:100px;
  position:absolute;
  height:100px;
  background:red;
  transition:top 2s;
  -moz-transition:top 2s; /* Firefox 4 */
  -webkit-transition:top 5s; /* Safari and Chrome */
  -o-transition:top 2s; /* Opera */
  display:block;
}
.hi:checked+.ani{top:50%;}

<input type="checkbox" id="button" class="hi">
<label class="ani" for="button"></label>

谁能帮忙......

Answer 1

你需要给出.ani一个初始top值:

input{display:none}
.ani
{
  width:100px;
  position:absolute;
  height:100px;
  background:red;
  transition:top 2s;
  -moz-transition:top 2s; /* Firefox 4 */
  -webkit-transition:top 5s; /* Safari and Chrome */
  -o-transition:top 2s; /* Opera */
  display:block;
  top: 0;
}
.hi:checked+.ani{top:50%;}

<input type="checkbox" id="button" class="hi">
<label class="ani" for="button"></label>

你提到你希望它暂停2秒然后再向上移动所以你真的想要更像这样的东西吗？

input{display:none}
.ani
{
  width:100px;
  position:absolute;
  height:100px;
  background:red;
  transition:top 2s;
  -moz-transition:top 2s; /* Firefox 4 */
  -webkit-transition:top 5s; /* Safari and Chrome */
  -o-transition:top 2s; /* Opera */
  display:block;
  top: 0;
}
.hi:checked+.ani{
    -webkit-animation: upDown 3s ease;
    -moz-animation: upDown 3s ease;
    -animation: upDown 3s ease;
}

@-webkit-keyframes upDown {
    0% { top: 0; }
    10% { top: 50% }
    90% { top: 50%; }
    100% { top: 0; }
}

@-moz-keyframes upDown {
    0% { top: 0; }
    10% { top: 50% }
    90% { top: 50%; }
    100% { top: 0; }
}

@keyframes upDown {
    0% { top: 0; }
    10% { top: 50% }
    90% { top: 50%; }
    100% { top: 0; }
}

<input type="checkbox" id="button" class="hi">
<label class="ani" for="button"></label>