-webkit-appearance of forcing transitions?

Question

Given the basic HTML template and CSS style, I see that two different elements react completely differently.

setTimeout(function() { document.body.id = 'animate'; }, 100); 

 #animate input[type="checkbox"]{ width: 100px; height: 100px; transition: 2s all; -moz-appearance: none; } #animate div{ width: 100px; height: 100px; background:blue; transition: 2s all; } 

 <input type="checkbox"/> <div></div> 

If you open it in a browser, you will see that when loading the div already has a height / width of 100px, but the checkbox increases from 0px to 100px in height / width for 2 seconds.

Why does input behave differently than a div ? Is it because the input has a default value of -webkit-appearance , giving it something to jump between?

Answer 1

The default width / height of the div is auto and, as such, will not animate.

input has a default width / height and, as such, will animate.

As a side note, the transition does work on the div , although it only animates its color, since you can animate the color from transparent to blue

You should also consider not using all with transition , as this can give unpredictable results due to this fact that browsers set some element values ​​to the default value, where some can be animated, some cannot.

So, in your case, if you intend to animate the width / height, configure it like this: transiton: width 2s ease, height 2s ease;

Answer 2

The answer is simple. The input style has preloaded values ​​in the DOM, so immediately after appearing in the document it gradually changes its shape.

Quite the opposite of the div element. div does not have preloaded default values ​​in the DOM before setting them by the user. Therefore, it appears in a document with an already set size.

Important Note
If you want the transition to work, it must have a set, start, default value and final value. Animation will occur between these two values. input has already set a default value for the size, so the animation will take place.

You may ask, why does the background transition work? It works because the default value of background transparent.

 setTimeout(function() { $('.xx').addClass('x'); }, 500); 

 * { margin: 0; padding: 0; border: 0; } input[type="checkbox"] {} div {} .x { width: 100px; height: 100px; transition: all 2s ease; background: blue; } .container { display: flex; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='container'> <input type='checkbox'> <div class='xx'></div> <input class='xx' type="checkbox"> </div> 

Answer 3

Short answer without being technical. The CSS transition will do the job when there is a previous state to start the animation.

By default, the div by default has no style. The input element is always pre-created in the browser itself.

Here is a fiddle that can be used to recreate the behavior mentioned by the OP. It simulates external loading with simple JS latency. https://jsfiddle.net/xvt359ju/1/

Nevermind, 2 more answers were faster than me.

Answer 4

Browsers have their own CSS-style elements, there is a flag too. When you check an element, you can see the width and height of the checkbox used by the browser, which will be redefined when loading your external style sheets. And enlivening him, as you went over to him.