有一个图像淡入，下降，并反弹一旦到位

Have an image fade in, drop, and bounce once into position

本文关键字：图像 淡入 下降 有一个      更新时间：2023-09-26

我正在尝试创建一个图像淡出并下降的效果，在回落到最低位置之前反弹一次。

我已经完成了渐入渐变，但是在停止之前它的下降反弹一次，我无法工作。

我发现了这个代码:http://codepen.io/Dingerzat/pen/wozrjg从这个主题:CSS动画/移动图像与@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;
   }
}
相关文章：