CSS过渡从右侧移动图像

【问题标题】：CSS transition to move image in from rightCSS过渡从右侧移动图像
【发布时间】：2012-03-05 22:49:01
【问题描述】：

我有一个有趣的情况，我想知道是否可以使用 CSS 过渡来解决。

描述它的最佳方式是查看jsfiddle。

您可以看到，当您将鼠标悬停在标题栏上时，文本框和图像会移动。

但是，这是通过将 X 背景位置设置为 100% 以上来完成的，这会让事情变得有点紧张！尝试调整浏览器宽度以了解我的意思。

您可以从左侧执行此操作 - 请参阅此 jsfiddle，但我想不出从右侧执行此操作的 CSS 方式。

我在想这可以在将来通过calc() 完成？

有什么想法吗？

【问题讨论】：

【解决方案1】：

在 nav 中添加一个 div 作为小猫背景的钩子，使其向右浮动并在悬停时为宽度设置动画...稍微调整一下就可以了..

【讨论】：

很棒的小提琴，但并没有完全做我想做的事。我想把图片滑进去。我想我已经想出了另一种方法，但需要一张特殊的图片
如果你想让整个图像滑入，那么除了你一开始尝试用绝对位置移动整个 div 之外别无选择。我猜这个错误是由于当你以某种方式调整浏览器窗口的大小，背景位置的百分比基于原始视口大小，因此计算错误？..
是的，将百分比值设置在 0-100 之外似乎会做一些心理上的事情。