Adding Infinite-loop Bounce Animation Effect To An Image

Insert the image tag into your HTML code, and add the “class” attribute with the value of “bounce-animate”.

<img src="image.jpg" class="bounce-animate">

We will use the standard @keyframe syntax from the W3C to build the animation. However, vendor-specific prefixes (-webkit-, -moz-, -ms, and -o-) are advised to be included for the animation to function in all browsers.

Code example: In the CSS code, we first establish the @keyframes rule for the “bounce” animation, which modifies the image’s transform property at various points in time.

Then, in order to improve browser compatibility, we apply the “bounce” animation to the image using the animation property and include vendor-specific prefixes.

<style>
    /* bounce-animate */
.bounce-animate {
  animation-name: float-up;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /*! -moz-animation-name: float-up; */
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-up;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-up;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }

@-webkit-keyframes float-up {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }
</style>

Example