如何作为装载机无限重复动画？

时间：2015-12-22 13:13:01

标签： javascript jquery css

我有一些代码可以无限地为这条线设置动画。 我的HTML有点像这样。

<body>
    <div class="line_1"></div>
    <div class="line_2"></div>
    <div class="line_3"></div>
</body>

我已经应用了这样的CSS .. 

body {
padding:50px;
}

.line_1 {
position:relative;

width:50px;
height:5px;
opacity:0.3;
background-color:#ef4646;
transform:rotate(-45deg);
transform-origin:left;
top: -10px;
left: 10px;
}

.line_2 {
position:relative;
width:50px;
height:5px;
opacity:0.3;
background-color:#86b4fc;
transform:rotate(45deg);
transform-origin:left;
top: 10px;
left: 10px;
}

.line_3 {
position:relative;
top:60px;
left: -40px;
width:50px;
height:5px;
opacity:0.3;
background-color:#f7e551;
transform:rotate(-45deg);
transform-origin:right;
}

我的脚本有点像这样。

<script type="text/javascript">
        $(document).ready(function () {
            $('.line_1').animate({ opacity:"1",left:"0px",top:"0px" });
            setInterval(function () { $('.line_2').animate({ opacity: "1", left: "0px", top: "0px" }); },400);
            setInterval(function () { $('.line_3').animate({ opacity: "1", left: "-10px", top: "30px" }); }, 600);

        });
    </script>

此动画仅在页面加载时应用一次。但我希望它能够不断重复。请帮助我做到这一点。

3 个答案:

答案 0 :(得分：1)

您可以轻松地将其包装到函数中，然后使用jQuery animate的回调来再次调用该函数。您还需要删除任何应用的样式，我将通过从元素中删除style属性来执行此操作。我还使用jQuery的delay来延迟动画的执行。

我还清理了CSS，将共享元素放在共享规则中，这使得CSS更易于管理。

function Animation(){
  $('.line_1').removeAttr("style").animate({ 
    opacity:"1",
    left:"0px",
    top:"0px" 
  });
  $('.line_2').removeAttr("style").delay(400).animate({ 
    opacity: "1", 
    left: "0px", 
    top: "0px"
  });
  $('.line_3').removeAttr("style").delay(600).animate({ 
    opacity: "1", 
    left: "-10px", 
    top: "30px" 
  }, Animation);
}
$(document).ready(Animation);
body {
  padding:50px;
}

.line_1, .line_2, .line_3 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  transform-origin:left;
}

.line_1 {
  background-color: #ef4646;
  transform: rotate(-45deg);
  top: -10px;
  left: 10px;
}

.line_2 {
  background-color: #86b4fc;
  transform: rotate(45deg);
  top: 10px;
  left: 10px;
}

.line_3 {
  top: 60px;
  left: -40px;
  background-color: #f7e551;
  transform: rotate(-45deg);
  transform-origin: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
    <div class="line_1"></div>
    <div class="line_2"></div>
    <div class="line_3"></div>
</body>

答案 1 :(得分：1)

<强> - 编辑 -

你可以用css做到这一点。它在我看来是一个更好的解决方案，然后使用jquery。 我使用关键帧来动画它。并且animation-iteration-count: infinite;将使其无限生动。 如果您想要更快或更慢，请将animation-duration修改为您的首选持续时间。

＆＃13;
＆＃13; 
body {
  padding:50px;
}

.line_1, .line_2, .line_3 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  transform-origin:left;
}

.line_1 {
  background-color: #ef4646;
  transform: rotate(-45deg);
  top: -10px;
  left: 10px;
	animation-name: line-1;
	-webkit-animation-name: line-1;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes line-1 {
  0%   {opacity:0.3; }
  30%  {opacity:0.3; left: 10px; top: -10px;}
  50%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
}

@-webkit-keyframes line-1 {
  0%   {opacity:0.3; }
  30%  {opacity:0.3; left: 10px; top: -10px;}
  50%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
} 

.line_2 {
  background-color: #86b4fc;
  transform: rotate(45deg);
  top: 10px;
  left: 10px;
	animation-name: line-2;
	-webkit-animation-name: line-2;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes line-2 {
  0%   {opacity:0.3; }
  40%  {opacity:0.3; left: 10px; top: 10px;}
  60%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
}

@-webkit-keyframes line-2 {
  0%   {opacity:0.3; }
  40%  {opacity:0.3; left: 10px; top: 10px;}
  60%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
}

.line_3 {
  top: 60px;
  left: -40px;
  background-color: #f7e551;
  transform: rotate(-45deg);
  transform-origin: right;
	animation-name: line-3;
	-webkit-animation-name: line-3;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes line-3 {
  0%   {opacity:0.3; }
  50%  {opacity:0.3; left: -40px; top: 60px;}
  70%  {opacity:1; left: -10px; top: 30px;}
  100% {opacity:1; left: -10px; top: 30px;}
}

@-webkit-keyframes line-3 {
  0%   {opacity:0.3; }
  50%  {opacity:0.3; left: -40px; top: 60px;}
  70%  {opacity:1; left: -10px; top: 30px;}
  100% {opacity:1; left: -10px; top: 30px;}
}
＆＃13; 
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我建议在函数中包装所有内容并在间隔中调用它。

工作示例：

$(document).ready(function() {
  function startAnimation() {
    $('.line_1').animate({
      opacity: "1",
      left: "0px",
      top: "0px"
    });
    setTimeout(function() {
      $('.line_2').animate({
        opacity: "1",
        left: "0px",
        top: "0px"
      });
    }, 400);
    setTimeout(function() {
      $('.line_3').animate({
        opacity: "1",
        left: "-10px",
        top: "30px"
      });
    }, 600);
    setTimeout(function() {
      $('.line_1, .line_2, .line_3').removeAttr("style");
    }, 1600);

  }
  
  startAnimation();
  setInterval(startAnimation, 1650);
});
body {
  padding: 50px;
}

.line_1 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  background-color: #ef4646;
  transform: rotate(-45deg);
  transform-origin: left;
  top: -10px;
  left: 10px;
}

.line_2 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  background-color: #86b4fc;
  transform: rotate(45deg);
  transform-origin: left;
  top: 10px;
  left: 10px;
}

.line_3 {
  position: relative;
  top: 60px;
  left: -40px;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  background-color: #f7e551;
  transform: rotate(-45deg);
  transform-origin: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <div class="line_1"></div>
  <div class="line_2"></div>
  <div class="line_3"></div>
</body>

相关问题
最新问题