How to create CSS3 bounce effect
If all you need is a very simple bounce, it's as easy as just changing the transition function from ease-in to something else, such as a cubic-bezier.
An example of a cubic-bezier function that bounces would be
cubic-bezier(0.175, 0.885, 0.32, 1.275)
A full example:
div { background: tomato; width: 100px; height: 100px; margin-bottom: 10px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: top left;}div:hover { -webkit-transform: scale3d(5, 5, 5); transform: scale3d(5);}<div></div><div></div><div></div>How to create CSS3 bounce effect with PURE CSS
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>Add CSS bounce animation to a div on click only for once
As far as I understood you mean this:
- In the first version pulse effect and bounce effect run only clicking once
- In the second version pulse effect run always like present version but bounce effect run only clicking once
First version
element = document.getElementById("marker");
element.addEventListener("click", function(e) { e.preventDefault; // -> removing the class element.classList.remove("bounce"); // -> triggering reflow /* The actual magic */ // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered. element.offsetWidth = element.offsetWidth; // -> and re-adding the class element.classList.add("bounce");}, false);body { background: #e6e6e6;}
.pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: #00cae9; position: absolute; transform: rotate(-45deg); left: 50%; top: 50%; margin: -20px 0 0 -20px;}.pin:after { content: ""; width: 14px; height: 14px; margin: 8px 0 0 8px; background: #e6e6e6; position: absolute; border-radius: 50%;}
.bounce { animation-name: bounce; animation-fill-mode: both; animation-duration: 0.9s;}
.pulse { background: #d6d4d4; border-radius: 50%; height: 14px; width: 14px; position: absolute; left: 50%; top: 50%; margin: 11px 0px 0px -12px; transform: rotateX(55deg); z-index: -2;}.bounce+.pulse:after { content: ""; border-radius: 50%; height: 40px; width: 40px; position: absolute; margin: -13px 0 0 -13px; animation: pulsate 1s ease-out; opacity: 0; box-shadow: 0 0 1px 2px #00cae9; animation-delay: 0.1s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}
@keyframes pulsate { 0%, 100% { transform: scale(0.1, 0.1); opacity: 0; }
50% { opacity: 1; }
100% { transform: scale(1.2, 1.2); opacity: 0; }}
@keyframes bounce { 0% { opacity: 0; transform: translateY(-1000px) rotate(-45deg); }
60% { opacity: 1; transform: translateY(30px) rotate(-45deg); }
80% { transform: translateY(-10px) rotate(-45deg); }
100% { transform: translateY(0) rotate(-45deg); }}.myBounceDiv { -moz-animation:bounce .40s linear; -webkit-animation:bounce .40s linear; }
@-moz-keyframes bounce { 0%{ -moz-transform:scale(0); opacity:0;} 50%{ -moz-transform:scale(1.3); opacity:0.4; } 75%{ -moz-transform:scale(0.9); opacity:0.7;} 100%{ -moz-transform:scale(1); opacity:1;}}
@-webkit-keyframes bounce { 0%{ -webkit-transform:scale(0); opacity:0;} 50%{ -webkit-transform:scale(1.3); opacity:0.4;} 75%{ -webkit-transform:scale(0.9); opacity:0.7;} 100%{ -webkit-transform:scale(1); opacity:1;}}<div class='myBounceDiv'><div id="marker" class='pin'></div><div class='pulse'></div></div>Add a bounce effect at the end of css translate
Yes, you can totally do it with pure CSS. Check out the basic keyframes example below. You can easily tweak it to make it faster, smoother, longer, etc.
#bouncingObject { /* Regular CSS for the object */ width: 100px; height: 100px; background-color: red; position: absolute; top: 200px;
/* Handling the animation */ -webkit-animation-name: bounce; -webkit-animation-duration: 2s; animation-name: bounce; animation-duration: 2s;}
/* Defining the animation by dividing it to keyframes */@keyframes bounce { 0% {top:0px;} 25% {top:200px;} 40% {top:150px;} 55% {top:200px;} 70% {top:180px;} 85% {top:200px;} 100% {top:200px;}}
/* This is for Safari 4.0 - 8.0 */@-webkit-keyframes bounce { 0% {top:0px;} 25% {top:200px;} 40% {top:150px;} 55% {top:200px;} 70% {top:180px;} 85% {top:200px;} 100% {top:200px;}}<div id="bouncingObject"></div>How do I make a Bounce like animation with CSS?
check this
also for more css animations
check this https://daneden.github.io/animate.css/
for delay u can use "animation-delay"
http://www.w3schools.com/cssref/css3_pr_animation-delay.asp
like:
animation: bounceIn 2s infinite 2s;
@keyframes bounceIn { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); }}
body { background: black;}
.arrow { position: fixed; bottom: 0; left: 50%; margin-left:-20px; width: 40px; height: 40px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); background-size: contain; opacity: 0;}
.bounce { animation: bounceIn 2s infinite 2s;}<div class="arrow bounce"></div>How to use css3 to achieve a ball bounce effect?
With little trial and error we can figure out the bounce effect as needed.
There is this formula that is used in all jQuery easing plugins to get the bounce effect.
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
// t: current time, b: begInnIng value, c: change In value, d: duration
So applying this to current CSS keyframes.
d : the animation duration. //1.5 : 1500
b : top value at the start // 0
c : change in value //40px
t : Current time // 10
With some more work on it by applying these we might find out the values needed for the bounce effect in CSS.
I also found this CSS3 3D Bouncing Ball tutorial
Hope that might help you.
Why is my bounce animation so jumpy instead of smooth?
The long rest in between is due to your keyframe settings. Your current keyframe rules mean that the actual bounce happens only between 40% - 60% of the animation duration (that is, between 1s - 1.5s mark of the animation). Remove those rules and maybe even reduce the animation-duration to suit your needs.
.animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;}@-webkit-keyframes bounce { 0%, 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-5px); }}@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); }}.bounce { -webkit-animation-name: bounce; animation-name: bounce;}#animated-example { width: 20px; height: 20px; background-color: red; position: relative; top: 100px; left: 100px; border-radius: 50%;}hr { position: relative; top: 92px; left: -300px; width: 200px;}<div id="animated-example" class="animated bounce"></div><hr>Related Topics
Filter: Progid:Dximagetransform.Microsoft.Gradient Is Not Working in Ie7
CSS Width 100% Including Overflow
HTML.Actionlink with a Specified HTML Id
Remove or Add Class in Angular
How to Horizontally Center an Item in Mui Grid Item
Is There a Working Implementation of CSS3 Grid Layout for Webkit
An Efficient Way to Merge 2 Large CSS Files
Why Is Bootstrap Trying to Load Less Files in Edge
Div Margin-Bottom of a Proportion of Its Own Height
How to Make Custom Scrollbars Show in All Browsers
Vue Binding Value Based on Media Query
Make Empty Div of One Line Height