我正在尝试创建一种效果，其中图像会逐渐变暗，掉落，反弹一次，然后再降回最低位置。
我已经完成淡入淡出，但是在停止之前无法下降，它的下降弹跳一次。
我在以下主题中找到了以下代码：http://codepen.io/Dingerzat/pen/wozrjg：CSS Animation/ Moving an image up the screen with @KEYFRAMES与淡入效果很好，但是我不确定如何使其下降，反弹一个然后再次回到最低点。
这是我当前的版本：
http://codepen.io/Dingerzat/pen/mOrBWd
JS
$('#gallery img').each(function(i) {
$(this).delay(i*200).fadeIn('slow');
});
的HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Delayed image load in</title>
</head>
<style>
#float{
position: relative;
-webkit-animation: floatBubble 2s 2;
-webkit-animation-direction:alternate;
}
@-webkit-keyframes floatBubble{
from{
top:0;
-webkit-animation-timing-function: ease-in;
}
to {
top: 50px;
-webkit-animation-timing-function: ease-out;
}
}
</style>
<body>
<div id="gallery">
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon1.png" id="float" alt="" width="125" />
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon2.png" id="float" alt="" width="125" />
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon3.png" id="float" alt="" width="125"/>
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon4.png" alt="" width="125"/>
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon5.png" alt="" width="125"/>
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon6.png" alt="" width="125"/>
<img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon7.png" alt="" width="125"/>
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
</div>
</body>
</html>
最佳答案
这就是你想要的吗？ CODEPEN
基本上，我只是摆脱了其他东西，并以百分比形式编写了动画。并且您还需要将animation-fill-mode设置为“ forward”，以便它停留在动画结束的位置。
#float{
position: relative;
-webkit-animation: floatBubble 2s;
animation-fill-mode: forwards;
}
@-webkit-keyframes floatBubble{
0%{
top:0;
-webkit-animation-timing-function: ease-in;
}
33% {
top: 50px;
-webkit-animation-timing-function: ease-out;
}
66% {
top:0;
-webkit-animation-timing-function: ease-in;
}
100% {
top:50px;
-webkit-animation-timing-function: ease-in;
}
}
关于javascript - 使图像淡入，下降并反弹到适当位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40630377/