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

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

```css
#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;
}
```

```html
<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](https://i.stack.imgur.com/zFrox.gif)](https://i.stack.imgur.com/zFrox.gif)

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