Html css动画：将隐藏的div从侧面滑动到中心

我想制作一些浮动div的动画。 当div处于“close”（关闭）状态时，它的大部分隐藏在屏幕右侧，只有

20px

仍然可见

当我点击可见部分时，div移动到屏幕中央，显示自己。（我称之为打开状态）

我的问题是：

• 我只知道如何使用

  margin:auto

  将div居中，当我设置动画时，它会做一些奇怪的事情
• 当div“关闭”时，“隐藏”部分会创建一个溢出，并添加一个滚动。我不想那样
• div的宽度根据具体情况变化很大。因此，我无法在CSS中使用大量硬编码值

你知道怎么做吗？ 即使是部分解决方案也会对我有所帮助

编辑：解决方案（感谢@sonic）

---

这是一个太开放的问题，无法提供2,3分的帮助，甚至很难说出目标是什么，没有代码，谁知道

像这样对中div：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

---

您可以轻松地设置这些属性的动画。

这很有效，谢谢！我将编辑我的原始帖子以添加实现的解决方案。我不知道组合左+变换为中心的东西。

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);