下から右へ移動するdivをアニメ化する

Question

私はこれを持っていますが、このイメージは下から左に移動しますが、下から右に移動したいのです。私は変換の変換プロパティを使用しました。

<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

私は位置の値でやってみましたここ

はコード

htmlです。

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

} 

は、uは右コーナーに向けて途中からsamethingを行うことができますhere