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>

사람이 도와 드릴까요 ...

당신은 초기 top 값 .ani을 줄 필요가

Answer 1

:

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>