CSS动画两半画面在中间相遇（响应）

Question

所以我有这个问题，我需要用CSS制作动画，其中两个半画的画面是在单独的响应画布上绘制的，它们从页面的两侧开始，然后在页面中间相遇，然后去再次回到页面的两侧，这循环。我将尝试用图片来证明这一点：

Initial State

Canvases meet in the middle like this then return to initial state

所以现在我的状态是这样的：图片会移动，但是它们会移动到错误的位置。这就是我在关键帧中所拥有的：

@keyframes leftslide {

to {
    margin-left:50%;
}


}

@keyframes rightslide {   

to {
    margin-right:50%;
}

}

所以这几乎可以工作，但是边距会从屏幕侧面将图片按下50％，因此左边的图像按照自己的宽度向右移动太远，而右边的图像由于其自身的宽度而向左移动太远自己的宽度。

所以要解决这个问题，在保持动画响应的同时，我需要一些像这样的东西：

margin-left: calc(50% - WidthOfTheCanvas);

margin-right: calc(50% - WidthOfTheCanvas);

但是我不知道如何获取我正在移动的画布的宽度，这样我就可以减少适量的边距。

因此，如果没有解决方案，我的图片移动过多，最终会在中间重叠。

有没有办法找出我正在移动的元素的当前大小，还是应该通过使用除边缘之外的其他内容来实现？我一直在努力奋斗几个小时，所有的帮助将不胜感激！谢谢！ [在此处输入图像说明] [3]

Answer 1

这就是你要找的东西： https://www.w3schools.com/css/css3_2dtransforms.asp

transform: translateX(-50%);

尝试使用价值来获得正确的结果，但很可能你正在寻找50％/ -50％;