divをアニメーションして左から右に移動します。

Question

divをアニメーション化してWebページを左から右に移動する方法を理解しようとしています。私はそれが到達したときに右にすべての道が回転を開始し、ページ

の中央に移動を回転させながら、私はこの今のところ

@keyframes move 
    { 
     0% {left: 0%;} 
     50% {left: 100%;} 
     100% {left: 50%;;} 
    } 


    body { 
     background: white; 
    } 

    .square { 
     background: black; 
     width:10px; 
     height:10px; 
     position: absolute; 
     animation: move 5s; 

    } 

を持っていますが、私はについてはほとんど知っている、それは停止する必要がありますCSSアニメーション

Answer 1

これは多分ですか？

正方形が入力に到達したときに回転し続けることになっているかどうかは不明です。簡単なCSSだけのソリューションがなければ、それは別の問題です。

@keyframes move 
 
    { 
 
     0% { 
 
      left: 0%; 
 
      transform: rotate(0deg) ; 
 
     } 
 
     50% { 
 
      left: 100%; 
 
      transform: rotate(0deg) ; 
 
     } 
 
     52% { 
 
     transform: rotate(90deg); 
 
     } 
 
     70% { 
 
      transform: rotate(180deg); 
 
     } 
 
     100% { 
 
      left: 50%; 
 
      transform: rotate(360deg);} 
 
    } 
 

 

 

 
    body { 
 
     background: white; 
 
    } 
 

 
    .square { 
 
     background: black; 
 
     width:10px; 
 
     height:10px; 
 
     position: absolute; 
 
     animation: move 5s linear forwards; 
 
    }

<div class="square"></div>