CODEWITHSUNDEEP
htmlcss
Quelklef
Quelklef

Reputation: 2147

CSS3 only transition while hovered

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
}

Upvotes: 2

Views: 47

Answers (2)

Keval Bhatt
Keval Bhatt

Reputation: 6322

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

Upvotes: 1

answer99
answer99

Reputation: 251

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

Upvotes: 2

Related Questions