css - 如何将不同的动画速度分配给 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 船将沿对 Angular 线行驶

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