CSS3过渡：宽度表现得很奇怪

Question

我希望将宽度和左边距/ translateX转换为一个框，使其显示为从其中心开始增长。

不幸的是，宽度转换似乎与其他所有内容不同步，并且元素奇怪地跳跃。

即使时间非常长。

有人可以帮忙吗？

.escape {
  position: absolute;
  width: 100%;
  height: 960px;
  background-color: #000000;
  top: 100px;
  left: 0;
  overflow: hidden; }
  .escape .container {
    width: 10000px;
    min-height: 790px;
    /*      background-color: red; */ }
  .escape .first {
    min-width: 260px;
    height: 960px;
    background: black url(../women_look_14_15_export_small.jpg) scroll no-repeat top center;
    background-size: auto 100%;
    /*      background-image: url(image_01.jpg); */
    opacity: 0.5;
    -webkit-transition: transform 0.2s ease-out 0s;
    -moz-transition: transform 0.2s ease-out 0s;
    transition: transform 0.2s ease-out 0s;
    position: absolute;
    top: 0; }
  .escape .first:hover {
    opacity: 1;
    width: 400px;
    /*      margin-left: -$hover_margin; */
    z-index: 9999;
    -webkit-transform: translateX(-70px); }
  .escape .first.expanded {
    width: 900px;
    background-color: white;
    margin-left: -400px; }
  .escape .first.collapsed {
    width: 100px; }
  .escape .left {
    position: absolute;
    right: 10px;
    background-color: red;
    top: -90px;
    color: white;
    -webkit-transition: all 1.5 ease 0s;
    -moz-transition: all 1.5 ease 0s;
    transition: all 1.5 ease 0s; }
  .escape .left.show {
    top: 20px; }
  .escape .second {
    width: 90%;
    float: right;
    background-color: #fff700; }

.escape .first:hover是行为不当的选择者......

HTML：

<div class="escape">
    <div class="container">
            <div class="first">
                00
                <div class="left">One</div>
            </div>
            <div class="first">
                01
            </div>
            <div class="first">
                02
            </div>
            <div class="first">
                03
            </div>
            <div class="first">
                04
            </div>
            <div class="first">
                05
            </div>
            <div class="first">
                06
            </div>
            <div class="first">
                07
            </div>
            <div class="first">
                08
            </div>
            <div class="first">
                09
            </div>
            <div class="first">
                10
            </div>

    </div>





    <div class="second">Second</div>
</div>

谢谢！

本杰明