Animation in css not working

Question

I want to make to slide the block in center of the page on button click and after 3 sec it should so up. But it is not sliding but is abrupt no sliding.

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>

Can anyone help...

Answer 1

You need to give .ani an initial top value:

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>

You mentioned that you want it to pause for 2 seconds and then move back up so maybe you actually want something more like this?

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>