全部,
我希望能够使用translateX在子元素的父元素上（即从左边缘到右边缘）100%地设置子元素的动画
挑战在于translateX中的百分比指的是元素本身，而不是父元素
例如，如果我的html如下所示：
<；div id=“父项”>；
<；div id=“child”>；
</部门>；
我的CSS是这样的（省略了供应商前缀）：
父级{
位置：相对位置；
宽度：300px；
高度：100px；
背景色：黑色；
}
#孩子{
位置：绝对位置；
宽度：20px；
高度：100px；
背景色：红色；
转化：translateX（100%）；
}
这不起作用-子对象只移动20像素（自身的100%），而不是整个父对象。（您可以在JSFIDLE上看到这一点）：
我可以这样做：
孩子{
位置：绝对位置；
宽度：20px；
高度：100px；
背景色：红色；
-webkit转换：translateX（300px）translateX（-100%）；
转化：translateX（300px）translateX（-100%）；
}
这是可行的（在JSFIDLE上再次看到），因为它首先移动子对象300px（父对象的全宽）减去20px（子对象的宽度）。但是，这取决于父对象具有固定的已知像素尺寸
然而，在我的响应式设计中，我不知道父级的宽度，它会改变
我知道我可以使用left:0和right:0，但left/right的动画性能比translateX差得多（谢谢Paul Irish！）
有办法做到这一点吗
提前谢谢
我最初并没有发布我的想法，因为它涉及到创建一个额外的HTML层，并期望有更好的解决方案
既然那没有发生，我就解释我的评论。我的意思是：
父级{
位置：相对位置；
宽度：300px；
高度：100px；
背景色：黑色；
}
#包装纸{
位置：绝对位置；
宽度：100%；
高度：100px；
边框：实心1px绿色；
过渡：所有1；
}
#包装器：悬停{
-webkit转换：translateX（100%）；
转化：translateX（100%）；
}
#孩子{
位置：绝对位置；
宽度：20px；
高度：100px；
背景色：红色；
}
#包装器：悬停#子{
-webkit转换：translateX（-100%）；
转化：translateX（-100%）；
}
由于包装器的宽度为父级的100%，因此将其翻译为100%的效果与预期一样
拨弄
请注意，包装器正在按照您所说的100%进行翻译。但是，似乎您真正想要的是将元素移动100%的宽度。要实现这一点，还必须以相反方向平移子对象100%（现在这适用于子对象宽度）
更正：子项应共享包装的转换属性：
父级{
位置：相对位置；
宽度：300px；
高度：100px；
背景颜色：黑色；
}
#包装纸{
位置：绝对位置；
宽度：100%；
高度：100px；
边框：实心1px绿色；
过渡：所有5s；
}
#包装器：悬停{
转化：translateX（100%）；
}
#孩子{
位置：绝对位置；
宽度：50px；
高度：100px；
背景色：红色；
过渡：继承；
}
#包装器：悬停#子{
转化：translateX（-100%）；
}
<；div id=“父项”>；
<；div id=“包装器”>；
<；div id=“child”></部门>；
</部门>；
</部门>；