Why isnt my css transition working?

Question

I've looked over this simple code about hundred times, the transform property is working just fine, but its just snapping in place as if the transition property isnt working, what minor detail do I keep glossing over? Here a jsfiddle with the transform property commented out. https://jsfiddle.net/t8kbtjdy/30/

#testItem{
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
  transition: transform 1000ms ease-in-out 0ms;
}

Answer 1

the problem in your case is that you are loading your element in transformed state on your page so there is nothing to transition to.

In the example below I used hover to change the rotation:

#testItem{
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1000ms ease-in-out 0ms;
}
#testItem:hover{
  transform: rotate(45deg);
}

<div id="t2">
  <div id="testItem"></div>
</div>

However, if you want to see your transition on page load instead of :hover you need to use css animation

@keyframes rotateIt {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(0);
  }
}

#testItem{
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotateIt 1s infinite;
}

<div id="t2">
  <div id="testItem"></div>
</div>

Answer 2

I think you should go with s instead of ms.

Transition: all 1s ;

You can trim it to your need of course.