1

I am trying to create a bounce effect at the end of the animation of IMAGES with pure CSS but i have 3 images which i want to have bounce effect with different times format for each image. As my CSS is working only for one image how to change the format of this CSS?

Kindly advise

Here is what I have so far:

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
<ul class="clearfix">
  <div id="ubercontainer">
    <div id="container">

      <img src="../images/sideGAME1.jpg" / class="sideGMimg5">
      <li class="bounce animated ">
        <img src="../images/sideGAME2.jpg " / class="sideGMimg1 ">
        <span class="Jacpots_1">Major Millions</span>
        <br />
        <span id="firstword" class="introchange1">$6 231 515.23</span> 
      </li>
      <li class="bounce2 animated2">
        <img src="../images/sideGAME3.jpg" / class="sideGMimg2">
        <span class="Jacpots_2 ">Mega Moolah</span>
        <br />
        <span id="secondword " class="introchange2 ">$6 231 515.23</span> 
      </li>
      <li class="bounce3 animated3 ">
        <img src="../images/sideGAME4.jpg " / class="sideGMimg3 ">
        <span class="Jacpots_3">Mega Moolah Isis</span>
        <br />
        <span id="thirdword" class="introchange3">$6 231 515.23</span> 
      </li>
    </div>
  </div>

  <!-- <span class="Jacpots_1">abc</span> -->
</ul>
Sidharth Gusain
  • 1,473
  • 1
  • 13
  • 20
Morgan Ng
  • 813
  • 2
  • 10
  • 22

2 Answers2

1

Bouncing images at different times:

Add element with class bounce, bounce2 and bounce3. The CSS in my snippet has an animation delay for the bounce effect.

If you want to remove the infinite animation, simply change the infinite word to linear.

I have used your code for the example:

img {
  width: 50px;
}
.bounce {
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  -moz-animation: bounce 2s infinite;
  -o-animation: bounce 2s infinite;
}
.bounce2 {
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  -moz-animation: bounce 2s infinite;
  -o-animation: bounce 2s infinite;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.bounce3 {
  animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  -moz-animation: bounce 2s infinite;
  -o-animation: bounce 2s infinite;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
  }
}
@-o-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -o-transform: translateY(0);
  }
  40% {
    -o-transform: translateY(-30px);
  }
  60% {
    -o-transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
<ul class="clearfix">
  <div id="ubercontainer">
    <div id="container">

      <img src="../images/sideGAME1.jpg" / class="sideGMimg5 bounce">

      <li class="bounce animated ">
        <img src="../images/sideGAME2.jpg " / class="sideGMimg1 ">
        <span class="Jacpots_1">Major Millions</span>
        <br />
        <span id="firstword" class="introchange1">$6 231 515.23</span> 
      </li>

      <li class="bounce2 animated2">
        <img src="../images/sideGAME3.jpg" / class="sideGMimg2">
        <span class="Jacpots_2 ">Mega Moolah</span>
        <br />
        <span id="secondword " class="introchange2 ">$6 231 515.23</span> 
      </li>

      <li class="bounce3 animated3 ">
        <img src="../images/sideGAME4.jpg " / class="sideGMimg3">
        <span class="Jacpots_3">Mega Moolah Isis</span>
        <br />
        <span id="thirdword" class="introchange3">$6 231 515.23</span> 
      </li>
    </div>
  </div>

  <!-- <span class="Jacpots_1">abc</span> -->
</ul>
Luka Kerr
  • 4,161
  • 7
  • 39
  • 50
1

Use a single bounce class for all the li and different animated class like animated1, animated2, animated3 and then use animation-delay for animated2 and animated3 :

See the example according to your code below :

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.animated1 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated2 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.animated3 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
<ul class="clearfix">
  <div id="ubercontainer">
    <div id="container">

      <img src="../images/sideGAME1.jpg" / class="sideGMimg5">
      <li class="bounce animated1 ">
        <img src="../images/sideGAME2.jpg " / class="sideGMimg1 ">
        <span class="Jacpots_1">Major Millions</span>
        <br />
        <span id="firstword" class="introchange1">$6 231 515.23</span>
      </li>
      <li class="bounce animated2">
        <img src="../images/sideGAME3.jpg" / class="sideGMimg2">
        <span class="Jacpots_2 ">Mega Moolah</span>
        <br />
        <span id="secondword " class="introchange2 ">$6 231 515.23</span>
      </li>
      <li class="bounce animated3 ">
        <img src="../images/sideGAME4.jpg " / class="sideGMimg3 ">
        <span class="Jacpots_3">Mega Moolah Isis</span>
        <br />
        <span id="thirdword" class="introchange3">$6 231 515.23</span>
      </li>
    </div>
  </div>

  <!-- <span class="Jacpots_1">abc</span> -->
</ul>
Sidharth Gusain
  • 1,473
  • 1
  • 13
  • 20