title: SVG Animation - Animating SVG groups
body: <p>I want to achieve a conveyor belt animation on an SVG element i.e. the blocks on the conveyor belt need to move along with the belt in a particular direction. </p>
  
  <p>A better view of what i want to achieve:
  <a href="http://gph.is/2o6IcV0" rel="nofollow noreferrer">GIF</a></p>
  
  <p>The SVG image has separate groups for separate blocks that need to be moved along a line (belt). The svg can be found <a href="http://codepen.io/binarytrance/pen/NpBdPE?editors=1010" rel="nofollow noreferrer">here</a></p>
  
  <p>I tried using jquery animate to move them at an angle like so:</p>
  
  <pre><code>$(function() {
      var dist = 130;
      var angle = -48;
      var x = Math.cos(angle*Math.PI/180) * dist;
      var y = Math.sin(angle*Math.PI/180) * dist;
      // $(".st93").animate({'left': '+='+x+'px', 'top': '+='+y+'px'}, 1000);
    $(".st93").animate({"transform": "translateX(+=" +x+ "px)"}, {"transform": "translateY(+=" +y+ "px)"}, 1000);
  })
  </code></pre>
  
  <p>which didn't work.</p>
  
  <p>and then i tried using CSS only transforms like so:</p>
  
  <pre><code>#Square_1 {
    position: relative;
    animation-name: move;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes move {
    0% {
      opacity:0;
      //transform: translateX( -400px, 10px);
    }
    10% {
      opacity:1;
    }
    90% {
      opacity:1;
      transform: translate( 100px, -60px);
    }
    100% {
      opacity:0;
    } 
  }
  </code></pre>
  
  <p>which took me closer to what I wanted but still isn't showing the desired effect. the blocks start abruptly forming at their respective starting position instead of a continuously flowing from the start of the belt which seems far from natural.</p>
  
  <p>Any help will be appreciated. Thanks.</p>