CSSアニメーションの間隔

Question

私はCSSの専門家ではなく、問題があります。私のwebsiteには、アニメーションの周りにイメージがあるアニメーションがあります。これらはまったくリンクされていません。

CSS：

#center { 
    margin-top: 150px; 
    margin-bottom: 150px; 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    font-size: 50px; 
    line-height: 50px; 
    position: relative; 
} 

.rotate { 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    margin-right: 160px; 
} 

// ... code for animations 

は、HTML（簡体字）：

<div id="center"> 
    <div class="view"> 
      <div class="plane main"> 
      <div class="circle"></div> 
      <div class="circle"></div> 
      <div class="circle"></div> 
      <div class="circle"></div> 
      <div class="circle"></div> 
      <div class="circle"></div> 
      </div> 
     </div> 
    <img class="rotate" src="favicon.png width="64" height="64"> 
    <img class="rotate" src="favicon.png width="64" height="64"> 
    <img class="rotate" src="favicon.png width="64" height="64"> 
    <img class="rotate" src="favicon.png width="64" height="64"> 
    <img class="rotate" src="favicon.png width="64" height="64"> 
    <img class="rotate" src="favicon.png width="64" height="64"> 
    </div> 
</div> 

私は何をしたいのは、代わりに自分のポジショニング作りの、rotate画像が周りの内側のアニメーションを循環させるですそれはのように思われるようです。コードを完全に変更せずにどうすればいいですか？私が言ったように、私はCSSについて多くのことを知らないので、私が見たチュートリアルのどれも実際にこれを簡単に行う方法を教えてくれません。前もって感謝します！

編集：現在のアニメーションは長くて面倒ですので、ここには含めませんでしたが、jsfiddleにあります。

Answer 1

あなたは近くにいます。

すべてのアニメーションから2番目の回転を削除します。 イメージは常に中央を向いています。 more info

の操作を行います。

@keyframes rotate-1 { 
    from { transform: rotate(-30deg) translateY(-200px)} 
    to { transform: rotate(330deg) translateY(-200px)} 
} 

の代わりに：

@keyframes rotate-1 { 
    from { transform: rotate(-30deg) translateY(-200px) rotate(30deg) } 
    to { transform: rotate(330deg) translateY(-200px) rotate(-330deg) } 
}