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 [любые абсолютные длины или в], то> он будет работать