Как можно анимировать изображение

Question

Я хочу остановить эту анимацию снова и снова, также, когда анимация закончена, космический корабль идет прямо & летать с поворотами.

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

я хочу, чтобы остановить эту анимацию

Если вы не хотите анимацию бесконечной затем заменить все infinite значения во всех animation (с его суффиксами) с 1. Это значение связано с animation-iteration-count, поэтому количество анимаций будет 1, а не бесконечным.

После этого небольшое очарование осталось в .small-ghost. Он должен иметь начальный opacity, установленный в 0, чтобы быть скрытым после анимации.

https://jsfiddle.net/g1uh1Lsk/1/

также, когда анимация закончена космический корабль идти прямо & летать с вращается.

Лучше попытаться сделать эту часть самостоятельно, а затем задать конкретный вопрос, если что-то пойдет не так.