Saving CSS and jQuery Animations

Question

My problems:

• My animation does not respond. Images and text move and become too large when used on smaller screens.
• My .moveup class will not animate. I tried to place the CSS transition wherever I could think it belongs, but when jQuery adds to the class, the two affected photos just jump.

Background information:
I am creating a website, and, as part of this website, it is assumed that a short animation will be played before the slides are welcome aside, and the user will be presented with the website / application below.

I work with bootstrap 3 as my framework and use Animate.css for these animations, with my own .moveup.

I am having extreme problems allowing me to react correctly to my animation, as soon as I change the screen size, it crashes more than my poor little head can handle.

Animation:
It is assumed that the animation will consist of 5 elements: # ani_text_1, #ani_plus, # ani_text_2, #ani_equals and # ani_text_3 in this order. Then 3 other elements are added: #ani_mcloud, #ani_man and #ani_check, down, and then #ani_plus and #ani_equals, move further between them, which completes the animation.

My code:
HTML:

<div class="container-fluid">
  <div class="row">
    <div class="welcome">
      <div class="animate col-md-offset-2 col-md-8">
        <div class="row ani_drawing">
          <div class="col-md-4 col-sm-2">
            <img id="ani_mcloud" src="http://s33.postimg.org/5cnmfyam7/manycloud.png" class="wait_animation img-responsive center-block">
          </div>
          <div class="col-md-4 col-sm-2">
            <img id="ani_man" src="http://s33.postimg.org/v6strzl8f/man_indif2.png" class="wait_animation img-responsive center-block">
          </div>
          <div class="col-md-4 col-sm-2">
            <img id="ani_check" src="http://s33.postimg.org/v1p2ibdxb/check.png" class="wait_animation img-responsive center-block">
          </div>
        </div>
        <div class="row ani_text">
          <h4 id="ani_text_1" class="col-md-offset-1 col-md-2 wait_animation">Træk ikon og tekst der<br>passer bedst</h4>
          <div class="col-md-2">
            <img id="ani_plus" src="http://s33.postimg.org/3tnmx8enz/plus.png" class="wait_animation img-responsive center-block">
          </div>
          <h4 id="ani_text_2" class="col-md-2 wait_animation">Flyt det over på<br>ham her</h4>
          <div class="col-md-2">
            <img id="ani_equals" src="http://s33.postimg.org/syenane4f/equals.png" class="wait_animation img-responsive center-block">
          </div>
          <h4 id="ani_text_3" class="col-md-2 wait_animation">Få hjælp til at løse<br>din situation</h4>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

    .animate {
        padding-top: 8%;
    }
    #ani_mcloud,
    #ani_check {
        padding-top: 30%;
    }
    .moveup {
        position: relative;
        bottom: 130px;
    }
    .welcome {
        position: absolute;
        height: 100vh;
        width: 100vw;
        left: -9px;
        background-color: @white;
        z-index: 1;
        -webkit-transition: all 1.0s ease;
        -moz-transition: all 1.0s ease;
        -o-transition: all 1.0s ease;
        transition: all 1.0s ease;
    }
    .blue {
        background-color: @darkred;
    }
    .wait_animation {
        opacity: 0;
        transition: all 2s ease-in-out;
        -webkit-transition: all 2s ease-in-out;
        /** Chrome & Safari **/
        -moz-transition: all 2s ease-in-out;
        /** Firefox **/
        -o-transition: all 2s ease-in-out;
    }
    .animate img {
        width: 20%;
    }

JQuery

$('.wbutton').on('click', function() {
  $(".welcome").toggleClass('blue');
  setTimeout(function() {
    $("#ani_text_1").toggleClass("animation fadeInUp");
  }, 700);
  setTimeout(function() {
    $("#ani_plus").toggleClass("animation fadeInUp");
  }, 900);
  setTimeout(function() {
    $("#ani_text_2").toggleClass("animation fadeInUp");
  }, 1100);
  setTimeout(function() {
    $("#ani_equals").toggleClass("animation fadeInUp");
  }, 1300);
  setTimeout(function() {
    $("#ani_text_3").toggleClass("animation fadeInUp").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
      setTimeout(function() {
        $("#ani_mcloud").toggleClass("animation fadeInDown");
      }, 500);
      setTimeout(function() {
        $("#ani_cloud").toggleClass("animation fadeInDown");
      }, 700);
      setTimeout(function() {
        $("#ani_plus").toggleClass("moveup");
      }, 900);
      setTimeout(function() {
        $("#ani_man").toggleClass("animation fadeInDown");
      }, 1100);
      setTimeout(function() {
        $("#ani_equals").toggleClass("moveup");
      }, 1300);
      setTimeout(function() {
        $("#ani_check").toggleClass("animation fadeInDown");
      }, 1500);
    });
  }, 1500)
});

Answer 1

, . , , , , (, , ). .

.moveup #ani_plus. , bottom. , , , ( ). :

#ani_plus {
  bottom: 0;
}

, , . , , transform, . , - :

#ani_plus {
  transform: translateY(10%);
  transition: transform 2s ease-in-out;
}

.moveup {
  transform: translateY(0%);
}

, , ( ).

, : , , , , . , , . , .

, , / . . , !