animate div von unten nach rechts Ecke bewegen

Question

Ich habe dies, in diesem Bild bewegt sich von unten nach links, aber ich möchte es von unten nach rechts Ecke bewegen.Ich habe Transform übersetzen Eigenschaft verwendet.

Hier ist der Code

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

Ich habe versucht, mit Positionswerten zu tun.

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

} 

Siehe here