DasBeasto DasBeasto - 1 month ago 20
CSS Question

-webkit-appearance forcing transitions?

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.

enter image description here

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

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;