CSS3动画旋转螺旋效果？

Question

我一直在寻找并试验几天以产生这种效果，我想要一个中心点/块，然后是从元素开始的三个较小的块开始，然后这三个外部元素围绕中心旋转动画，直到他们自己就在中心（就像一个螺旋效应，但在中心结束）。

我自己无法编写解决方案，我最接近的是https://jsfiddle.net/8ouf291w/

小提琴也不完全正确（3个较小的块不能正确地绕中心块开始并且不会旋转到中心）。

小提琴代码如下 -

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);
    }
}