title: CSS and jQuery Analog clock - smooth animation
body: <p>I'm having i minor problem with my CSS3/jQuery analog clock.</p>
  
  <p>For every step, the clock-hands make, it is very hard. Instead I want the movement/animation to be smooth. I've already tried to use the <code>transition: all .1s</code> but it mess up, when the clock hands, reach the top.</p>
  
  <p>I'm using <code>transform: rotate()</code> to rotate every hands. For every movement, it rotates 6 deg.</p>
  
  <p>Maybe the solution could be, that instead of just rotate the hands, 6 deg for every second, minute and hour, it rotates 1 deg for every 1/6 of a second for the second-hand, every 10 seconds for the minute-hand and every 10 minutes for the hour-hand. I think it could create a more smooth hand-animation, but I do not know how to do this.</p>
  
  <h2>This is my JavaScript code:</h2>
  
  <pre><code>$(function() {
  
        setInterval( function() {
        var seconds = new Date().getSeconds();
        var sdegree = seconds * 6;
        var srotate = "rotate(" + sdegree + "deg)";
  
        $("#sec").css({ "transform": srotate });
  
        }, 1000 );
  
        setInterval( function() {
        var hours = new Date().getHours();
        var mins = new Date().getMinutes();
        var hdegree = hours * 30 + (mins / 2);
        var hrotate = "rotate(" + hdegree + "deg)";
  
        $("#hour").css({ "transform": hrotate});
  
        }, 1000 );
  
        setInterval( function() {
        var mins = new Date().getMinutes();
        var mdegree = mins * 6;
        var mrotate = "rotate(" + mdegree + "deg)";
  
        $("#min").css({"transform" : mrotate });
  
        }, 1000 );
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/FHNJf/1/" rel="nofollow">jsFiddle Demo</a></p>
  
  <p>Hope you understand the question, and can help me :)</p>