Css3 анимации с одинаковой длительностью завершаются в разное время при срабатывании одного и того же события

Question

Я пытаюсь создать меню, которое, как представляется, перемещается слева, используя преобразование в самом меню и изменение ширины на кнопке меню. Обе анимации запускаются через javascript при нажатии кнопки.

Если длительности установлены на одно и то же число, кнопка перемещается впереди меню, причем оба они заканчиваются в разное время. Если длительность будет изменена, чтобы они закончились одновременно, они по очереди обгоняют друг друга, хотя оба используют линейную синхронизацию.

Это кажется совершенно нелогичным, как можно отображать одинаковые длительности и тайминги на разных скоростях и длинах?

Я клонировал код на своем сайте относительно этой проблемы, и его можно найти по адресу https://jsfiddle.net/3g83t54t/, для ссылки на кликер здесь приведены ключевые фреймы и правила анимации, которые я придумал.

a#menu.closed:hover{ 
    -webkit-animation:button_fade .1s ease-in forwards; 
    margin:0; 
    padding:0 7px 0 4px; 
    width: 50px; 
} 
    a#menu.closed:hover div.blurb{ 
    -webkit-animation:button_blurb_fade .1s ease-in forwards; 
    } 
    a#menu.open{ 
    -webkit-animation:button_stretch 1s linear forwards; 
    padding: 0 4px; 
     width: 100%; 
    } 
div#sl_nav{ 
    -webkit-animation:menu_slide_in 1s linear forwards; 
} 

@-webkit-keyframes button_blurb_fade{ 
    to{ 
     background-color: #fff; 
    } 
} 
@-webkit-keyframes button_fade{ 
    to{ 
     background: #fff; 
     border-right: 1px solid #000; 
     border-bottom: 1px solid #000; 
    } 
} 
@-webkit-keyframes menu_slide_in { 
    from{-webkit-transform:translateX(-326px);} 
    to{-webkit-transform:translateX(0);} 
} 
@-webkit-keyframes button_stretch { 
    from{width: 50px;} 
    to{max-width: 377px;} 
} 

Answer 1

Изменить этот стиль:

@-webkit-keyframes button_stretch { 
    from{width: 50px;} 
    to{max-width: 377px;} 
} 

To:

@-webkit-keyframes button_stretch { 
    from{width: 50px;} 
    to{width: 377px;} 
} 

Я хотел бы рассказать вам, почему, но я действительно не знаю. ;) I думаю, чтоmax-width заставляет кнопку реагировать больше на другие элементы, которые также изменяют размер, поэтому он отстает. Указав width, вы просто вынуждаете его быть таким размером, никаких уступок.

Updated Fiddle