保持CSS和jQuery动画的响应性_Jquery_Html_Css_Twitter Bootstrap_Responsive Design

保持CSS和jQuery动画的响应性

jquery html css twitter-bootstrap responsive-design

保持CSS和jQuery动画的响应性,jquery,html,css,twitter-bootstrap,responsive-design,Jquery,Html,Css,Twitter Bootstrap,Responsive Design,我的问题： <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">

我的问题：

<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>

    .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%;
    }

$('.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)
});

我的动画没有响应。当在较小的屏幕上使用时，图像和文本会四处移动，变得太大
我的.moveup类将不会设置动画。我曾尝试将CSS转换放在我认为它应该放在的任何地方，但当jQuery添加到类中时，两幅受影响的图片就跳了起来

背景信息：
我正在建立一个网站，作为这个网站的一部分，之前应该播放一个简短的动画。欢迎幻灯片放在一边，用户将看到下面的网站/应用程序

我正在使用bootstrap3作为我的框架，并与我自己的.moveup一起用于这些动画

我在保持动画的正确响应方面遇到了极大的问题，一旦我改变屏幕大小，它就会以我可怜的小脑袋无法处理的方式被破坏

动画：
动画应该是5个元素向上滑动，#ani#u text_1，#ani#u plus，#ani#u text_2，#ani#u equals和#ani#u text_3，按顺序排列。然后其他3个元素，ani#u mcloud、ani#u man和ani#u check向下滑动，然后ani#u plus和ani#u equals在它们之间进一步向上滑动，从而完成动画

我的代码：
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>

    .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%;
    }

$('.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)
});

jQuery:

<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>

    .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%;
    }

$('.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)
});

既然你还在等待答复，我就告诉你我对这个情况的看法。我跟随了添加的链接，但我不认为我在该页面上看到了您所指的欢迎动画的示例（可能现在它被禁用了，因为我确实看到了一些标记）。因此，要提供更详细的答案仍然有点困难

首先，我将在#ani#u plus元素上介绍.moveup类动画。看起来主目标属性是

bottom

。为确保动画正常工作，在动画实际影响元素之前，元素上必须存在一个起始值（此时该元素中似乎缺少该值）。因此，添加以下内容：

#ani_plus {
  bottom: 0;
}

这样，过渡就知道从哪个初始值开始设置动画。请注意，更好的做法是使用

transform

属性设置元素的动画，并将其保留在最终位置。理想情况下，类似这样的情况：

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

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

渲染速度更快，而且我认为更容易维护（您不必担心最终位置）

好的，还有你最初的问题：在不知道页面在响应视图中应该如何运行的情况下，我只能建议你一次从一个元素开始，以避免被淹没。稳步缩小视口，直到它开始看起来很难看，然后对该元素进行调整。冲洗和重复，直到事情看起来完美

如果你能拿出一把小提琴来演示响应性问题，我非常愿意参与其中并帮助调试/提供想法。所以让我知道。希望这其中有一些是有帮助的

您是否有可能提供指向当前功能的链接？在不知道预期结果应该是什么（视觉上）的情况下提供帮助有点困难。哦，当然可以，我现在已经编辑好了，谢谢你注意到我。非常感谢你的回答，你对我的。移动动画的解决方案是正确的，并且有效，非常感谢你。至于链接，它是正确的，你只需点击“Jeg er klar”按钮即可启动它，很抱歉我忘记添加该链接，我将在中编辑它。我非常感谢你给了我一个答案，尽管我甚至不能看到动画。