ширина перехода от центра элемента

Question

Я пытаюсь иметь Div ее переход ширину (увеличить), но я хочу, чтобы расти от центра не в верхнем левом углу

HTML

<div id="attach-wrap"> 
     <div id="attach"> 

      ... content ... 

     </div> 
    </div> 

CSS # attach-wrap {min-height: 50px; }

#attach { 
    height: 50px; 
    width: 60%; 
    margin: 0 auto; 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #000; 
    -webkit-transition: height 0.35s ease, width 0.35s ease; 
    -moz-transition: height 0.35s ease, width 0.35s ease; 
    -ms-transition: height 0.35s ease, width 0.35s ease; 
    -o-transition: height 0.35s ease, width 0.35s ease; 
    transition: height 0.35s ease, width 0.35s ease; 
} 

#attach.stick { 
    height: 80px; 
    width: 100%; 
    border-bottom: 1px solid #000; 
    background-color: rgba(250,250,250,1); 
    position: fixed; 
    z-index: 100; 
    top: 0; left: 0; 
    margin: auto; 
} 

«.stick» добавляется, когда выполняются определенные условия и таким образом оживляет его. Все работает отлично, за исключением того, что класс .stick добавляется и анимирует высоту и ширину, это делается слева направо. Я хочу, чтобы он пришел из центра. Он сжимается с центра, когда удаляется класс .stick, не знаю, почему

Answer 1

Попробуйте удалить position:fixed с #attach.stick. Это должно позволить ему масштабироваться, как вы ожидаете.

JSFiddle (Нажмите, чтобы переключиться)

Если вам требуется position:fixed, всегда дают #attach явный запас, а также анимировать край (Fiddle):

#attach { 
    height: 50px; 
    width: 60%; 
    margin: 0 20%; 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #000; 
    -webkit-transition: margin 0.35s ease, height 0.35s ease, width 0.35s ease; 
    -moz-transition: margin 0.35s ease, height 0.35s ease, width 0.35s ease; 
    -ms-transition: margin 0.35s ease, height 0.35s ease, width 0.35s ease; 
    -o-transition: margin 0.35s ease, height 0.35s ease, width 0.35s ease; 
    transition: margin 0.35s ease, height 0.35s ease, width 0.35s ease; 
} 

#attach.stick { 
    height: 80px; 
    width: 100%; 
    border-bottom: 1px solid #000; 
    background-color: rgba(250, 250, 250, 1); 
    z-index: 100; 
    top: 0; 
    left:0; 
    margin: 0; 
    position:fixed; 
}