Automatically launch CSS3 animations

Question

I have a multi-page slider: I inserted the css3 animation (famous rocket animation)

I had a 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('/img/2258b7e33a60565fbedcda529a1b00e9.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);
}

<div id="outerspace">
  <div class="rocket">
    <div></div>
    BoneOS
  </div>#outerspace
</div>

Run codeHide result

How to automatically start an animation when changing slides?

Answer 1

You should look in CSS3 animations, which will work in almost all modern browsers without using javascriptor jQuery.

Here's the JSfiddle , and you will need to add it to your slider.

A simple example would be:

/* Add a keyframe with a name, also add */
@keyframes rocket {
  from {
    transform: translate(0px, 0);
  }
  to {
    transform: translate(0px, -250px);
  }
}


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;
  /* Use the animation name with additional properties */
  animation-name: rocket;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Working fragment:

#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;
  -webkit-animation-name: rocket;
  -webkit-animation-duration: 3s;
  animation-name: rocket;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
div.rocket div {
  width: 92px;
  height: 215px;
  background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
}
#outerspace:hover div.rocket {
  -webkit-transform: translate(0px, -250px);
  -moz-transform: translate(0px, -250px);
  -o-transform: translate(0px, -250px);
  -ms-transform: translate(0px, -250px);
  transform: translate(0px, -250px);
}
@-webkit-keyframes rocket {
  from {
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    transform: translate(0px, 0);
  }
  to {
    -webkit-transform: translate(0px, -250px);
    -moz-transform: translate(0px, -250px);
    -o-transform: translate(0px, -250px);
    -ms-transform: translate(0px, -250px);
    transform: translate(0px, -250px);
  }
}
@keyframes rocket {
  from {
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    transform: translate(0px, 0);
  }
  to {
    -webkit-transform: translate(0px, -250px);
    -moz-transform: translate(0px, -250px);
    -o-transform: translate(0px, -250px);
    -ms-transform: translate(0px, -250px);
    transform: translate(0px, -250px);
  }
}

<div id="outerspace">
  <div class="rocket">
    <div></div>
    BoneOS
  </div>#outerspace
</div>

Run codeHide result

Answer 2

Soo , , outerspace div ,

#outerspace.active 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);
}

addclass removeeclass Jquery.Makesure, , , .

$("#outerspace").addClass("active");

setTimeout(function() { 
    $("#outerspace").removeClass("active"); 
}, 1000);

, , codepen , , , , ,

http://codepen.io/saa93/full/BQNXJd