-webkit-appearance forcing transitions?

Question

Given a basic HTML template and CSS style, I'm seeing two different elements react completely different.

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 this in a browser, you see that, on load, the div already has its 100px height/width, yet the checkbox grows from 0px to 100px height/width over 2s.

Why does the input behave differently than the div? Is it because the input has default -webkit-appearance giving it something to transition between?

Answer 1

The div's default width/height is auto and as such it won't animate.

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

As a side note, the transition does work on the div, though only animate its color, as it is possible to animate a color from transparent to blue

You should also consider to not use all with transition, as it can give unpredictalbe result because of this fact that browsers does set some values on elements to a default value, where some can be animated, some can't.

So, in your case, if your intention is to animate width/height, set it up like this: transiton: width 2s ease, height 2s ease;