CSS3動畫旋轉螺旋效果？

Question

我一直在尋找和試驗幾天來產生這種效果，我想要一箇中心點/塊，然後三個小塊開始在元素周圍開始，然後這3個外部元素動畫圍繞中心旋轉直到它們結束在中心本身（如螺旋效應，但在中心結束）。

我已經無法編寫一個解決辦法我自己，我來最接近的是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); 
    } 
} 

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

你在正確的道路上，但只有變換是必要的