Question

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

＆＃13;

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%;}

＆＃13;

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

＆＃13;

任何人都可以帮忙......

Answer 1

您需要为.ani提供初始top值：

＆＃13;

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%;}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

动画在CSS不工作

1 个答案: