Question

我试图让一艘船同时从左向右和从上到下移动（它描述了一条直线向下的线）。我想在＆＃39; X＆＃39;中为动画分配不同的速度。和＆＃39; Y＆＃39;轴。我的意思是我希望小船在从左向右移动时移动速度较慢，从上到下移动速度更快，但我还没有能够实现这一目标，因为我不知道如何分离速度不同的动画属性。我非常感谢任何建议。这是我的代码：

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

提前致谢！

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

如何为CSS3动画中的不同属性指定不同的动画速度？

1 个答案: