对 div 进行动画处理以从下角移动到右上角



我有这个,在这个图像从下角移动到左上角,但我希望它从下角移动到右上角。我使用了转换翻译属性。

这是代码

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

我尝试使用位置值。

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

参考这里

最新更新