Automatic start Animation CSS3
<p>I have an multipage with slider: I inserted a css3 animation (the famous rocket animation)</p>

<p>I had code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#outerspace {
  position: relative;
  height: 400px;
  background: #fff;
  color: #fff;
}
div.rocket {
  position: absolute;
  bottom: 10px;
  left: 20px;
  -webkit-transition: 3s ease-in;
  -moz-transition: 3s ease-in;
  -o-transition: 3s ease-in;
  transition: 3s ease-in;
}
div.rocket div {
  width: 92px;
  height: 215px;
  background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
  -webkit-transition: 2s ease-in-out;
  -moz-transition: 2s ease-in-out;
  -o-transition: 2s ease-in-out;
  transition: 2s ease-in-out;
  -webkit-animation: bounceIn 2s;
}
#outerspace:hover div.rocket {
  -webkit-transform: translate(0px, -5400px);
  -moz-transform: translate(0px, -5400px);
  -o-transform: translate(0px, -5400px);
  -ms-transform: translate(0px, -5400px);
  transform: translate(0px, -5400px);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outerspace"&gt;
  &lt;div class="rocket"&gt;
    &lt;div&gt;&lt;/div&gt;
    BoneOS
  &lt;/div&gt;#outerspace
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>How Can I start animation automatically when slide changes?</p>

<p><a href="https://i.stack.imgur.com/nxion.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nxion.gif" alt="rocket"></a></p>