循环动画不起作用
循环动画不起作用
提问于 2016-02-12 18:51:51
在JS中需要这个
我正试着制作一个从盒子的右边滑到左边的云彩的动画。考虑到这一点，云应该在两边逐渐消失。当云在移动时，它就会褪色。
我试图使这是一个连续动画，而不是通过使用setInterval递归调用它。
但是，由于某些原因--这是不起作用的，我已经链接了示例和代码。https://jsfiddle.net/tes1ey3L/2/
但你知道这个主意。-一边滑到另一边，一边慢慢消失。然后再来一遍。
animateC();
setInterval(animateC(),35000);
function animateC() {
$('#animationCloud').css('left', '680px');
$('#animationCloud').parent().animate({queue:false, opacity: 1 }, 5000, 'linear');
$('#animationCloud').animate({ left: -161 }, 35000, 'linear');
$('#animationCloud').parent().delay(25000).animate({ opacity: 0.0 }, 5000, 'linear');
}#container {
width: 680px;
height: 200px;
background-color: blue;
margin-left: 170px;
}
#animationCloud {
background-color: white;
width: 161px;
height: 150px;
text-align: center;
border-radius: 10px;
line-height: 150px;
position: relative;
}
#parent {
width: 100%;
height: 100%;
position: relative;
opacity: 0.0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="parent">
<div id="animationCloud">
Im a cloud
</div>
</div>
</div>
回答 2
Stack Overflow用户
发布于 2016-02-12 19:14:16
使用CSS动画怎么样？
.bg {
position: relative;
width: 400px;
height: 200px;
margin: 0;
padding: 0;
background-color: lightblue;
}
.cloud {
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: white;
border-radius: 10px;
padding: 10px;
margin: 100px 0;
position: absolute;
transform: translate(-50%, -50%);
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes move {
0% {
left: 0%;
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}<div class="bg">
<div class="cloud">I'm in a cloud!</div>
</div>
Stack Overflow用户
发布于 2016-02-12 19:04:34
函数setInterval应该在没有()的情况下实现。
我修正了你的密码。试着使用这样的东西：
function animateC() {
$('#animationCloud').css('left', '680px');
$('#animationCloud').parent().animate({queue:false, opacity: 1 }, 3000, 'linear');
$('#animationCloud').animate({ left: -161 }, 3000, 'linear');
$('#animationCloud').parent().delay(1000).animate({ opacity: 0.0 }, 3000, 'linear');
}
animateC();
setInterval(animateC,3100);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35370098
复制相关文章
相似问题
腾讯云开发者
