CSS3仅在悬停时过渡

Question

我有一个transition: margin-left 0.7s;元素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 。当已知输出环境时，它们主要有用。

因此，在您的示例中，如果您提供width：5 [任何绝对长度或in]，那么它将起作用