요소 하향식 축소 방법?

div를 100 %에서 0으로 다시 크기 조정하여 애니메이션을 사라지게하고 싶습니다. 그러나 애니메이션의 필드 높이를 설정하면 요소가 맨 아래 부분부터 축소되기 시작하고 위쪽에서 축소되기 시작합니다. ir를 만드는 법에 대한 아이디어가 있습니까? 사전에요소 하향식 축소 방법?

@-webkit-keyframes my-animation /* Safari and Chrome */ 
{ 

    0% 
    { 
     opacity: 1; 
     height:44px;//element size 
    } 

    100% 
    { 
     opacity: 0; 
     height: 0px; 
    } 


}

감사 :

이 코드 조각은 오늘 내 애니메이션을 보여줍니다.

출처

2012-12-13 Leandro

세트'위치 : absolute' 여기에 (또한 리팩토링) 관련 코드는 (또는 상대/고정) 및'top : 0px'에서'top : 44px'까지? –

약간의 포지셔닝을 통해 이후의 작업을 수행 할 수 있습니다. 여기

.foo { 
    position: relative; 
} 
@keyframes foo { 
    100% { 
     opacity: 0; 
     height: 0; 
     top: 44px; /* Height of element */ 
    } 
}

그리고 라이브 예 (호버 애니메이션을 트리거)입니다 -

<div class="foo"></div>

: http://jsfiddle.net/joshnh/Fdg3C/

출처

2012-12-13 02:59:42 joshnh

요소 하향식 축소 방법?

답변

관련 문제