Question

我有这个，在这里，图像从左下角移动，但我希望它从下到右移动。我使用了transform translate属性。

这是代码

HTML：

  <div class="rocket">
        <img src="images/rocket.png" alt=""/>
    </div>

的CSS：

  .rocket{position:absolute;top:22%;left:18%; -webkit-animation: shimmy 3s infinite;animation: shimmy 3s infinite;  -webkit-animation-direction: alternate;animation-direction: alternate;width: 79px;height: 85px;}
   @keyframes shimmy {
    0% {
transform: translate(0, 0);    
 }
  50% {
    transform: translate(12px, 12px);
   }
  100% {
    transform: translate(15px, 15px);
  }
 }
    @-webkit-keyframes shimmy {
 0% {
     -webkit-transform: translate(0, 0);    
    }
      50% {
      -webkit-transform: translate(12px, 12px);
      }
     100% {
      -webkit-transform: translate(15px, 15px);
     }
   }

Answer 1

我尝试过使用位置值。

<div class="rocket">
    <img src="http://www.parleproducts.com/images/parle_2020/20-20_CashewButter.jpg" alt="" height='100px' width='100px'/>
</div>


.rocket{position:absolute;
bottom:0;
right:0;
animation: shimmy 3s infinite;
animation-direction: alternate;
}
@keyframes shimmy {
0% {
    bottom:0;
 }
100%{
    bottom:100%

 }

参考here

动画div从下到右移动

1 个答案: