중첩 된 div 요소에 크기를 적용하는 방법은 무엇입니까? (jQuery)

Question

CSS animations으로 회전 기어를 만들었습니다. 이제 전체 회전 장치 div가 1%에서 110%에서 100%으로 다시 생생하고 1%으로 다시 생기고 싶습니다. 또는 기본적으로 1px ~ 90px ~ 80px (정상 크기)에서 다시 1px으로 내려갑니다.

지금은 #spinner div 안에있는 요소에서 사용하고있는 jQuery가 애니메이션 처리되지만 여전히 꺼져 있습니다. 애니메이션은 1 %에서 110 %까지 확대되는 CSS 전환 눈금처럼 행동해야합니다. 지금은 애니메이션이 중심에 있지 않습니다.

의견이 있으십니까?

jsFiddle : http://jsfiddle.net/leongaban/d7UjD/681/
NEW CodePen : http://codepen.io/leongaban/pen/wJAip

나는 #spinner 사업부의 각 요소를 애니메이션 할 것인가?

---

jQuery를 및 애니메이션 밖으로 확대를위한 :

function firstAnimate() { 
    $('#spinner').animate({width: "110px", height: "110px"}, secoundAnimate); 
} 

function secoundAnimate() { 
    $('#spinner').animate({width: "80px", height: "80px"}, 'slow', thirdAnimate); 
} 

function thirdAnimate() { 
    $('#spinner').animate({width: "1px", height: "1px"}, 'fast', fourthAnimate); 
} 

function fourthAnimate() { 
    $('#spinner').hide; 
} 

firstAnimate(); 

내 회전 기어 HTML :

<div id="spinner"> 
    <div id="logo"> 
     <img src="http://leongaban.com/_codepen/whoat/loader-logo.png"/> 
    </div> 
    <div id="gear" class="spin"> 
     <img src="http://leongaban.com/_codepen/whoat/loader-gear.png"/> 
    </div> 
</div> 

CSS의 :

#spinner { 
    position: absolute; 
    width: 80px; height: 80px; 
    top: 35%; left: 50%; 
    margin-left: -40px; 
    background: blue; 
} 

#logo { 
    position: absolute; top: 0; left: 0; width: 80px; height: 80px; z-index: 3; 
} 

#logo img { width: 100%; height:100%; } 

#gear { 
    position: absolute; top: 0; left: 0; 
    -webkit-transition: -webkit-transform 0.1s; 
    transition: transform 0.1s; 
    -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 
    transform: translateX(100%) translateY(-100%) rotate(45deg); 
    z-index: 2; 
} 
#gear img { display:block; } 

Answer 1

내가 원하는 효과를 얻으려면 CSS 스케일과 jQuery의 조합을 사용해야했습니다.

규모

http://codepen.io/leongaban/pen/wJAip

까지 애니메이션 할 수있는 수준의 필요와 하나가 아래로 애니메이션 효과 @Zeaklous 들으, 자연스럽게 중심에서 수직 확장의 더 나은 작업을 수행합니다

.animateUp { 
    -webkit-animation: animateUp .5s ease-in-out; 
    animation: animateUp .5s ease-in-out; 
} 
.animateDown { 
    -webkit-animation: animateDown .5s ease-in-out; 
    animation: animateDown .5s ease-in-out; 
} 

@-webkit-keyframes animateUp { 
    0% { 
     -webkit-transform: scale(.1); 
     transform: scale(.1); 
    } 
    70% { 
     -webkit-transform: scale(1.1); 
     transform: scale(1.1); 
    } 
    100% { 
     -webkit-transform: scale(1); 
     transform: scale(1); 
    } 
} 
@-webkit-keyframes animateDown { 
    0% { 
     -webkit-transform: scale(1); 
     transform: scale(.1); 
    } 
    100% { 
     -webkit-transform: scale(.1); 
     transform: scale(.1); 
    } 
} 

jQuery를 통해 애니메이션 효과를 제어 할 수 있습니다.

$('#animate-up').unbind('click').bind('click', function() { 
    $('#spinner').removeClass('animateDown'); 
    $('#spinner').addClass('animateUp'); 
    console.log('animate up'); 
}); 

$('#animate-down').unbind('click').bind('click', function() { 
    $('#spinner').removeClass('animateUp'); 
    $('#spinner').addClass('animateDown'); 
    console.log('animate down'); 
});