Q:

How to avoid anti-clockwise rotation animation when reseting rotation from 360deg to 0 deg?

I am creating an animation that looks like a fancy wheel, When resetting rotation from 360deg to 0 deg, It animating the wheel in anti-clockwise direction, How to Avoid this???
HTML
<ul class="cm">
  <li><span>01</span></li>
  <li><span>02</span></li>
  <li><span>03</span></li>
  <li><span>04</span></li>
  <li><span>05</span></li>
  <li><span>06</span></li>
  <li><span>07</span></li>
  <li><span>08</span></li>
</ul>

SCSS
$Brdr: #7d868c;
  *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    &:before,&:after{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
  %notaList{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  $node: 8;
  $s: 80px;
  $rotation: 0;

  .cm{
    top: 50%;
    left: 0;
    right: 0;
    width: $s;
    height: $s;
    margin: auto;
    display: block;
    position: absolute;
    transition: transform 0.8s ease-out;
    transform:rotate(#{$rotation}deg);
    @extend %notaList;
    background: rgba(#000, 0.5);
    border-radius: 50%;
    li{
      left: 0;
      top:-($s*2 - ($s/2));
      color:#333;
      width:90%;
      height: 90%;
      display: block;
      position: absolute;
      margin-bottom: ($s*2 - ($s/2));

      & > span{
        display: block;
        padding: 36%;
        text-align: center;
        overflow: hidden;
        background: #CCC;
        border-radius: 5px 5px 50% 50%;
        transition: transform 0.8s ease-out;
      }
      @for $i from 1 through $node{
        &:nth-child(#{$i}n) {
          transform-origin: 50% ($s*2);
          transform: rotate(($i - 1) * 360deg/$node);
          & > span {
            transform:rotate(($rotation * -1) - (($i - 1) * 360deg/$node));
          }
        }
      }
    }
  }

JQuery
var i = 1,
    nodes = 8;

setInterval(function(){
  var rotation = i * 360 / nodes;
  i = i + 1;

  $('.cm').css({
    'transform': 'rotate(' + rotation + 'deg)'
  }).attr('data-rotation', rotation);

  $('.cm li').each(function (node){
    r = (node) * 360/nodes;
    $($('.cm li')[node]).find('span').css({
      'transform': 'rotate(' + ((rotation*-1) - r) + 'deg)'
    });
  });

  if(i >= nodes){
    i = 0;
  }
}, 1000);

JsFiddle link:
https://jsfiddle.net/aspjsplayground/hqczLby7/

A:

I've edited your jsfiddle so that it does not animate the rotation when reseting to 0.
When doing this it's helpful to use window.requestAnimationFrame since modifying transition isn't instant.
https://jsfiddle.net/hqczLby7/8/

