CSS3仅在悬停时过渡

Question

I have an element with transition: margin-left 0.7s; on it.

The transition works fine, but it also animates on zoom. Is there any way to stop this?

Examples using width instead of 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

Remove the width:5vw; and make width as in PX or in %

HTML:

<div></div>

CSS:

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

Jsfiddle

Answer 2

Understanding sizing in CSS

---

There are two types of measurement units:

1. relative lengths: Relative length units specify a length relative to another length. The relative units are: em, ex, ch, rem, vw, vh, vmin, vmax . They are mainly useful when the output media has dynamic size like responsive layout for mobile device, laptop.
2. absolute lengths: these are fixed in relation to each other and anchored to some physical measurement. The absolute units are: px, mm, cm, in, pt, pc .They are mainly useful when the output environment is known.

so in your example if you give width:5[any absolute lengths or in]then > it will work