Schro Schro - 25 days ago 6
CSS Question

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

I am trying to create an effect where an image fades in and drops down, bounces once before dropping back into the lowest position.

I have the fade in bit done, but its the drops down bounce once before stopping that I cannot get working.

I found this code: http://codepen.io/Dingerzat/pen/wozrjg from this topic: CSS Animation/ Moving an image up the screen with @KEYFRAMES which works quite well with the fade in, but I am not sure how to make it drop, bounce one, and then settle back into the lowest point again.

This is my current version:
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>

Answer

Is this what you wanted? CODEPEN

Basically I just got rid of the alternate thing and wrote the animation in percents. And you also need to set the animation-fill-mode to "forwards" so it stays where the animation ends.

#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;
   }
}