animate div从底部移动到右侧角落

Question

我有这个，在这个图像从底部到左侧角落移动，但我希望它从底部移动到右侧角落。我已经使用了transform转换属性。

这里是代码

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