Все,

Я хотел бы иметь возможность использоватьtranslateX анимировать дочерний элемент на 100% через его родительский элемент (т.е. от левого края к правому краю).

Проблема в том, что проценты вtranslateX обратитесь к самому элементу, а не к родителю.

Так, например, если мой HTML выглядит так:

<div id="parent">
    <div id="child">
</div>

А мой CSS такой (префиксы вендоров опущены):

#parent {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: black;
}
#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
    transform: translateX(100%);
}

Это не работает - ребенок перемещается только на 20 пикселей (100% от самого себя), но не полностью через родителя. (Вы можете увидеть это наjsfiddle):

Я могу сделать это:

#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
    -webkit-transform: translateX(300px) translateX(-100%);
    transform: translateX(300px) translateX(-100%);
}

Это работает (виделаздесь снова на jsfiddle), поскольку сначала он перемещает дочерний объект на 300 пикселей (полная ширина родительского элемента), минус 20 пикселей (ширина дочернего элемента). Однако это зависит от того, имеет ли родитель фиксированный известный размер в пикселях.

Тем не менее, в моем адаптивном дизайне - я не знаю ширину родителя, и она изменится.

Я знаю, что я могу использоватьleft:0 а такжеright:0, но производительность анимации влево / вправо намного хуже, чем у translateX (Спасибо Пол Ирландский!).

Есть ли способ сделать это?

Заранее спасибо.