如何在CSS3动画中为不同的属性分配不同的动画速度？

Question

我试图让一艘船从左到右和从上到下同时移动（它描述了一条直线向下的线）。我想为'X'和'Y'轴中的动画分配不同的速度。我的意思是我希望小船在从左到右移动时移动速度较慢，而从上到下移动时移动速度较快，但我无法完成此操作，因为我不知道如何区分不同动画的速度属性。我非常感谢任何建议。这里是我的代码：

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>

提前感谢！

Answer 1

试试这个更新的关键帧

@-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) 
     } 
    }