css - CSS3 トランジション: 幅の動作がおかしい

Question

幅と左マージンを移行したい/ボックスを移動して、中央から大きく見えるようにします。

残念ながら、幅の遷移は他のすべてと同期していないようで、要素は奇妙にホップします。

非常に長いタイミングでも。

誰でも助けることができますか？

.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は動作がおかしいセレクタです…</p>

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>

ありがとう！

ベンジャミン