CSS3只在转移时徘徊

Question

我有一个transition: margin-left 0.7s;的元素。

转换工作正常，但它也可以放大缩放。有没有办法阻止这个？

使用width代替margin-left的示例：

JSFiddle：https://jsfiddle.net/7py46d3L/

HTML：

<div></div>

CSS：

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

Answer 1

删除width:5vw;并按PX或%

中的宽度制作宽度

HTML：

<div></div>

CSS：

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

Jsfiddle

Answer 2

了解CSS中的大小调整

有两种类型的测量单位：

1. 相对长度： 相对长度单位指定相对于另一长度的长度。相对单位为： em，ex，ch，rem，vw，vh，vmin，vmax 。它们主要用于输出媒体具有动态大小，如移动设备，笔记本电脑的响应式布局。
2. 绝对长度：这些是相互固定的，并固定在一些物理测量上。绝对单位为： px，mm，cm，in，pt，pc 。当输出环境已知时，它们主要有用。

  

所以在你的例子中，如果你给出宽度：5 [任何绝对长度或者]然后＆gt;它会起作用