Animating keyframes with transition for rotation in CSS3
<p>I'm trying out a simple example of continuous spin animation (infinite) using steps, but I cannot seem to make a smooth transition between states.
So what I'm trying is to animate the rotation (infinite) of a textbox from 0 to 360 degrees, with pause between each step: <a href="http://jsfiddle.net/Ugc5g/7367/" rel="nofollow">demo jsfiddle</a>.
But jump is instant, I cannot make them transition smooth from one to another. 
How can I achieve this, using only CSS?</p>

<p>My code so far is:</p>

<pre><code>&lt;input type="text" id="textbox" class='textbox animate' value="Text box"/&gt; 


body, html {
  width: 100%;
  height: 100%;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
}
input {
  margin-top: 70px;
  clear: both;
}

.textbox {
   width: auto;
   display:block;
   text-align: center;
}

.textbox.animate {
   animation:spin 30s steps(30, end) infinite;
   transition: rotate 0.3s ease;
}
@keyframes spin { 
   100% { transform: rotate(360deg); } 
}
</code></pre>