如何在CSS3動畫中爲不同的屬性分配不同的動畫速度？

我試圖讓一艘船從左到右和從上到下同時移動（它描述了一條直線向下的線）。我想爲'X'和'Y'軸中的動畫分配不同的速度。我的意思是我希望小船在從左到右移動時移動速度較慢，而從上到下移動時移動速度較快，但我無法完成此操作，因爲我不知道如何區分不同動畫的速度屬性。我非常感謝任何建議。這裏是我的代碼：如何在CSS3動畫中爲不同的屬性分配不同的動畫速度？

body { 
 
     overflow-x:hidden; 
 
    } 
 
    
 
    div { 
 
     width: 150px; 
 
     height: 150px; 
 
     top: 20px; 
 
     background-image: url('https://s-media-cache-ak0.pinimg.com/originals/c2/bb/ae/c2bbaed0207deef5775af9c01e1b31ba.jpg'); 
 
     position: relative; 
 
     background-size: cover; 
 
     animation: mymove 5s linear infinite; 
 
    
 
    } 
 
    
 
    @-webkit-keyframes mymove { 
 
     0% { 
 
     left:-1%; 
 
     top:-1%; 
 
     transform: rotate(5deg) 
 
     } 
 
     
 
     20% { 
 
     
 
     transform: rotate(-5deg) 
 
     } 
 
     40% 
 
     { 
 
     
 
     transform: rotate(5deg) 
 
     } 
 
     60% { 
 
     
 
     transform: rotate(-5deg) 
 
     } 
 
     80%{ 
 
     
 
     transform: rotate(5deg) 
 
     } 
 
     100% { 
 
     left:100%; 
 
     top:100%; 
 
     transform: rotate(-5deg) 
 
     } 
 
    }

<div></div>

提前感謝！

來源

2017-06-16 Julio Rodriguez

試試這個更新的關鍵幀

@-webkit-keyframes mymove { 
     0% { 
     left:-1%; 
     transform: rotate(5deg) 
     } 

     20% { 

     transform: rotate(-5deg) 
     } 
     40% 
     { 
     left:90%; 
     transform: rotate(5deg) 
     } 
     60% { 

     transform: rotate(90deg) translate(0px,0px) 
     } 
     80%{ 

     transform: rotate(95deg) translate(210px,0px) 
     } 
     100% { 
     left:90%; 
     transform: rotate(90deg) translate(410px,0px) 
     } 
    }

更新答案＃1 船將前往斜

@-webkit-keyframes mymove { 
     0% { 

      transform: translate(0px,0px) rotate(55deg) 
     } 
     10% { 
      transform: translate(100px,50px) rotate(60deg) 
     } 
     20% { 
      transform: translate(200px,100px) rotate(55deg) 
     } 
     30% { 
      transform: translate(300px,150px) rotate(60deg) 
     } 
     40% { 
      transform: translate(400px,200px) rotate(55deg) 
     } 
     50% { 
      transform: translate(500px,250px) rotate(60deg) 
     } 
     60% { 
      transform: translate(600px,300px) rotate(55deg) 
     } 
     70% { 
      transform: translate(700px,350px) rotate(60deg) 
     } 
     80% { 
      transform: translate(800px,400px) rotate(55deg) 
     } 
     90% { 
      transform: translate(900px,450px) rotate(60deg) 
     } 
     100% { 
      transform: translate(1000px,500px) rotate(55deg) 
     } 
    }

來源

2017-06-16 13:01:28 divine

感謝回答，但更新將小船描述了一個「L」的軌跡。我希望這艘小船繼續向下移動：從上到下，從左到右。我的意思是，從左邊開始：0和頂部：0，結束於左邊：100％和頂部：100％。但是在「X」軸比在「Y」軸上翻譯得慢。希望可以有人幫幫我。 :) –

@JulioRodriguez請檢查我更新的答案。 – divine

如何在CSS3動畫中爲不同的屬性分配不同的動畫速度？

回答

相關問題