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