CODEWITHSUNDEEP
javascriptjquerycssanimation
naltamur
naltamur

Reputation: 123

Automatic start Animation CSS3

I have an multipage with slider: I inserted a css3 animation (the famous rocket animation)

I had 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.sstatic.net/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);
}
<div id="outerspace">
  <div class="rocket">
    <div></div>
    BoneOS
  </div>#outerspace
</div>

How Can I start animation automatically when slide changes?

rocket

Upvotes: 4

Views: 4147

Answers (2)

n4m31ess_c0d3r
n4m31ess_c0d3r

Reputation: 3148

You should look into CSS3 animations which will work in almost all the modern browsers without the use of javascript or jQuery.

Here's a JSfiddle to start with, and you will need to add into your slider.

A simple example would be like:

/* 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 snippet: 

#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.sstatic.net/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>

Upvotes: 1

Saa_keetin
Saa_keetin

Reputation: 655

Soo Plan here is to trigger the animation by adding active class to the outerspace div instead of hover, like below 

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

and the trigger it through addclass and removeclass in Jquery.Makesure to set time out to allow time for the transition to take place before removing the class. 

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

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

I wasnt sure what you wanted to do with the rocket exactly but this codepen link shows the rocket being triggered when the slide changes, i have used simple slider as the question doesnt mention exactly what kind of slider are you using,

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

Upvotes: 2

Related Questions