Morgan Ng Morgan Ng - 2 months ago 19
CSS Question

How to create CSS3 bounce effect with PURE CSS

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> -->
</li>
</ul>




Answer

Bounding images at different times:

Add element with class bounce, bounce2 and bounce3 and 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 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>

Comments