如何在這些嵌套的div元素上設置動畫大小？ （jQuery）

Question

我用CSS animations創建了一個紡紗工具。現在我想要整個旋轉齒輪動畫從1%到110%到100%然後回到1%。或基本上1px到90px到80px（正常大小）然後回到1px。

現在，我在#spinner div中使用的jQuery上的動畫是它的動畫，但它仍然關閉。動畫應該像CSS過渡比例，從1％縮小到110％。目前我的動畫偏離中心。

有什麼想法？

的jsfiddle：http://jsfiddle.net/leongaban/d7UjD/681/
新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 scale和jQuery的組合來獲得我想要的效果。

規模確實從中心不費吹灰之力，THX @Zeaklous擴大的一個更好的工作

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

所需類動畫並一個動畫下來：

.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'); 
});