how can animate image - html

Question

I want to stop this animation again and again, also when animations is finished spacecraft go right & fly with rotates.
jsfiddle
/* Table of contents
---------------
- Imports
- Mixins
- Extends
- Main Elements
*/
/*
IMPORTS
*/
#import url("http://fonts.googleapis.com/css?family=Montserrat");
/*
MIXINS
*/
/*
EXTENDS
*/
.center-hv, .ufo {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*
CONTAINER
*/
.loading {
font-family: 'Montserrat', sans-serif;
background-color: #2e5b8d;
color: white;
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
-ms-transition: 2s ease-in-out;
transition: 2s ease-in-out;
}
/*
MAIN ELEMENTS
*/
.ufo {
position: absolute;
background-image: url("http://www.picz.ge/img/s2/1503/25/d/d3ea7c2c9736.png");
width: 130px;
height: 256px;
top: 55%;
}
.ufo.light {
background-image: url("http://biacosta.com/img/loading/ufoLight.png");
opacity: 0;
-webkit-animation: 3s ease-in-out infinite normal running;
-moz-animation: 3s ease-in-out infinite normal running;
-o-animation: 3s ease-in-out infinite normal running;
-ms-animation: 3s ease-in-out infinite normal running;
animation: 3s ease-in-out infinite normal running;
-webkit-animation-name: switch;
-moz-animation-name: switch;
-o-animation-name: switch;
-ms-animation-name: switch;
animation-name: switch;
}
#-webkit-keyframes switch {
30% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
}
#-moz-keyframes switch {
30% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
}
#keyframes switch {
30% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
}
.small-ghost {
position: absolute;
background-image: url("http://www.picz.ge/img/s2/1503/25/9/93b31db2958a.png");
width: 61px;
height: 53px;
bottom: 15px;
opacity: 1;
-webkit-animation: 3s ease-in-out infinite normal;
-moz-animation: 3s ease-in-out infinite normal;
-o-animation: 3s ease-in-out infinite normal;
-ms-animation: 3s ease-in-out infinite normal;
animation: 3s ease-in-out infinite normal;
-webkit-animation-name: float;
-moz-animation-name: float;
-o-animation-name: float;
-ms-animation-name: float;
animation-name: float;
right: 32px;
}
#-webkit-keyframes float {
0% {
opacity: 1;
bottom: 15px;
}
20% {
opacity: 1;
}
50% {
opacity: 0.5;
bottom: 15px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
90% {
bottom: 150px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
}
#-moz-keyframes float {
0% {
opacity: 0;
bottom: 15px;
}
20% {
opacity: 1;
}
50% {
opacity: 0.5;
right: 45px;
bottom: 15px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
90% {
right: 45px;
bottom: 150px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
}
#keyframes float {
0% {
opacity: 0;
right: -130px;
bottom: 15px;
}
20% {
opacity: 1;
}
50% {
opacity: 0.5;
right: 45px;
bottom: 15px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
90% {
right: 45px;
bottom: 150px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
}
<div class="loading">
<div class="ufo light"></div>
<div class="ufo">
<div class="small-ghost"></div>
</div>

Answer 1

i want to stop this animation
If you do not want the animation to be infinite then replace all infinite values in all animation (with its suffixes) properties with 1. This value is related to animation-iteration-count so animation count will be 1 instead of infinite.
After that a small enchantment left in .small-ghost. It should have initial opacity set to 0 to be hidden after the animation.
https://jsfiddle.net/g1uh1Lsk/1/
also when animations is finished spacecraft go right & fly with rotates.
It's better to try to make this part by yourself and then ask a concrete question if something goes wrong.