動畫一個div從左到右移動然後返回

-1

我想知道如何動畫div從左到右移過網頁。然後我需要它停止當它達到一路向右開始轉動，然後一陣天旋地轉移動到頁面的中心動畫一個div從左到右移動然後返回

我有這個迄今爲止

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

來源

2016-09-01 k_schultz

這可能嗎？

我不確定廣場是否應該繼續旋轉，當它到達輸入。沒有簡單的純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>

來源

2016-09-01 00:18:51 Scott

動畫一個div從左到右移動然後返回

回答

相關問題