Html 设置CSS列和SVG的动画

我试图在CSS中产生一种效果，使两列相邻，一个svg是产品的插图，另一个是一些文字，如描述。所以他们“滑入”我想用很多产品做到这一点。 但我完全被卡住了

第一：布局。我无法垂直对齐两列（svg和文本），也无法使它们彼此足够靠近

第二：动画。动画完成后，文本将消失，但仅在浏览器中消失，而不是在dreamweaver的实时模式下消失

我的完整代码如下：

我知道这可能被认为是两个不同的问题，应该分别发布，但可能这些问题是相关的

非常感谢你的帮助，因为我很着急

#包装器{
利润率：2米自动；
宽度：800px；
位置：相对位置；
填充：4REM0；
}
.阿尼布洛克{
保证金：4rem-4rem 0-2rem；
填充：0；
列表样式：无；
列数：2；
}
李先生{
位置：相对位置；
显示：块；
填充：0；
保证金：0 2rem 2rem 0；
文字装饰：无；
破门而入：避免；
}
.左{
动画名称：向左走；
动画持续时间：1s；
动画迭代次数：1；
动画计时功能：轻松；
动画填充模式：正向；
}
.对{
动画名称：来吧；
动画持续时间：1s；
动画迭代次数：1；
动画计时功能：轻松；
动画填充模式：正向；
}
@关键帧向左移动{
0%{transform:translateX（-200px）；不透明度：0；}
100%{transform:translateX（0）；}
}
@关键帧来了吗{
0%{transform:translateX（200px）；}
100%{transform:translateX（0）；}
}

新产品
关于产品的一些说明

问题1：SVG周围空间过大

这是因为您的

viewBox

绝对是巨大的。您的垃圾箱图像约为417x522，但您的viewBox显示为3000x3000。因此，第一步是解决以下问题：

<svg viewBox="135 994 417 522" ...

新产品
关于产品的一些说明

请在问题中包含一些代码。