html - CSS3动画旋转螺旋效果？

Question

为了产生这种效果，我已经搜索和试验了好几天，我想要一个中心点/ block ，然后是围绕该元素开始的三个较小的 block ，然后这 3 个外部元素围绕中心旋转，直到它们结束自己处于中心(像螺旋效应但在中心结束)。

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

fiddle 也不完全正确(3 个较小的 block 没有正确地围绕中心 block 开始，也没有螺旋进入中心)。

fiddle 代码如下-

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

这是一种可能

@-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

你走在正确的道路上，但只需要转换