title: CSS3 animation rotate spiral effect?
body: <p>I've been searching and experimenting for days to produce this effect, I want a center dot/block and then three smaller blocks starting around the element to begin with, then these 3 outside elements animate rotating around the center until they end being in the center themselves (like a spiral effect but ending in the center). </p>
  
  <p>I've been unable to code a solution myself, the closest I've come is <a href="https://jsfiddle.net/8ouf291w/" rel="nofollow">https://jsfiddle.net/8ouf291w/</a></p>
  
  <p>The fiddle isn't fully correct either (the 3 smaller blocks don't begin around the center block correctly and don't spiral into the center).</p>
  
  <p>The fiddle code is below -</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="logowrap"&gt;
      &lt;div&gt;
          &lt;div class="yellow"&gt;&lt;/div&gt;
          &lt;div class="blue"&gt;&lt;/div&gt;
          &lt;div class="orange"&gt;&lt;/div&gt;
          &lt;div class="green"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#logowrap{
      text-align:center;
      margin-top:200px
  }
  #logowrap&gt;div{
      display:inline-block;
      position:relative;
  }
  #logowrap&gt;div div{
      position:absolute;
  }
  
  #logowrap .yellow, #logowrap .blue, #logowrap .orange{
      left:15px;
      top:17.5px;
      width:30px;
      height:35px;
  }
  #logowrap .green{
      width:60px;
      height:70px;
      background-color:green;
  }
  #logowrap .yellow{
      background-color:yellow;
      -webkit-animation: yellow 5s;
      -webkit-animation-iteration-count: 1;
  }
  #logowrap .orange{
      background-color:orange;
      -webkit-animation: orange 5s;
      -webkit-animation-iteration-count: 1;
  }
  #logowrap .blue{
      background-color:blue;
      -webkit-animation: blue 5s;
      -webkit-animation-iteration-count: 1;
  }
  
  
  @-webkit-keyframes yellow
  {
      from {
          margin-left:-100px;margin-top:100px;
          transform: rotate(0deg)
                     translate(-150px)
                     rotate(0deg);
      }
      to {
          margin-left:0px;margin-top:0px;
          transform: rotate(360deg)
                     translate(-0px) 
                     rotate(-360deg);
      }
  }
  @-webkit-keyframes blue
  {
      from {
          margin-top:-100px;
          transform: rotate(0deg)
                     translate(-150px)
                     rotate(0deg);
      }
      to {
          margin-left:0px;margin-top:0px;
          transform: rotate(360deg)
                     translate(-0px) 
                     rotate(-360deg);
      }
  }
  @-webkit-keyframes orange
  {
      from {
          margin-left:100px;margin-top:100px;
          transform: rotate(0deg)
                     translate(-150px)
                     rotate(0deg);
      }
      to {
          margin-left:0px;margin-top:0px;
          transform: rotate(360deg)
                     translate(-0px) 
                     rotate(-360deg);
      }
  }
  </code></pre>