CSS3 animation rotate spiral effect?

Question

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).

I've been unable to code a solution myself, the closest I've come is https://jsfiddle.net/8ouf291w/

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).

The fiddle code is below -

HTML:

<div id="logowrap">
    <div>
        <div class="yellow"></div>
        <div class="blue"></div>
        <div class="orange"></div>
        <div class="green"></div>
    </div>
</div>

CSS:

#logowrap{
    text-align:center;
    margin-top:200px
}
#logowrap>div{
    display:inline-block;
    position:relative;
}
#logowrap>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);
    }
}

Answer 1

This would be one possibility

@-webkit-keyframes yellow
{
    from {
        transform: rotate(0deg)
                   translate(150px)
                   rotate(0deg);
    }
    to {
        transform: rotate(360deg)
                   translate(0px) 
                   rotate(-360deg);
    }
}
@-webkit-keyframes blue
{
    from {
        transform: rotate(120deg)
                   translate(150px)
                   rotate(-120deg);
    }
    to {
        transform: rotate(480deg)
                   translate(0px) 
                   rotate(-480deg);
    }
}
@-webkit-keyframes orange
{
    from {
        transform: rotate(240deg)
                   translate(150px)
                   rotate(-240deg);
    }
    to {
        transform: rotate(600deg)
                   translate(0px) 
                   rotate(-600deg);
    }
}

fiddle

You were on the right path, but only the transforms are needed