Html CSS3仅在悬停时转换

我有一个元素具有

转换：左边距为0.7s在上面

过渡工作正常，但也会在缩放时设置动画。有没有办法阻止这一切

使用
宽度
代替
左边距
的示例：

JSFiddle：

HTML:

拆下
宽度：5vw并使宽度与
PX
或
%

HTML:

了解CSS中的大小调整


有两种类型的测量单位：

相对长度：
相对长度单位指定相对于另一长度的长度。相关单位为：em、ex、ch、rem、vw、vh、vmin、vmax。当输出介质具有动态大小（如移动设备、笔记本电脑的响应布局）时，它们主要有用
绝对长度：这些长度彼此相对固定，并固定在某些物理测量值上。绝对单位为：px、mm、cm、in、pt、pc。当输出环境已知时，它们主要有用
因此，在您的示例中，如果您给出宽度：5[任何绝对长度或英寸]，则>它将起作用

这是可行的，所以我感谢你们，并且很可能会接受你们的答案，但我会把这个问题留一段时间，看看我是否能得到更好的答案，更漂亮的答案。谢谢。嗯。。。事实上，这并不能满足我的需要。请稍后解释。@Quelklef此答案是否适用于当前状态下的问题；接受它。如果您的实际用例与当前状态下的问题不同，请编辑您的问题或询问新问题。
<div></div>

div {
    transition: width 0.7s;
    width: 5vw;
    height: 10px;
}
div:hover {
    width: 10vw
}

<div></div>

div {
    transition: width 0.7s;
    width: 50px;
    height: 10px;
}
div:hover {
    width: 10vw
}