Is there a CSS Bounce Transition - html

Question

Hello I wondering if there is a transition to make the purple div (the one that slides down when you hover over the feeling down? picture) bounce when it reaches the end?
here is the code- and jsFiddlle Demo link
HTML
<div class="img">
<div class="hover"><h2>project 1</h2></div>
</div>
CSS
.img {
width: 457px;
height: 288px;
background-image: url("http://i59.tinypic.com/xdulh2.png");
position:relative;
overflow:hidden;
}
h2 {
font-family: avenir;
font-weight: bold;
font-size: 40px;
color: #000;
}
.hover {
position:absolute;
top:-100%;
width: 457px;
height: 288px;
background: rgba(130,76,158,0.5);
-webkit-transition:all 1s;
}
.img:hover .hover {
top:0;
}
an example of the transition i mean you can see here http://www.ollygibbs.com

Answer 1

CSS Transition doesn't have bounce-style timing function, so we have to code it with CSS animation keyframes. The problem here is - how to easily decompose a bouncing ( or any other ) functions into a keyframe series over certain style?
This was the problem I encountered when I build transition.css, so I built a tool "easing.css" to help me generate keyframes from arbitrary equations.
The idea is simple; say we want to make a bounce effect:
we first make a timing function f(t) for our desired effect, such as
Math.abs(Math.sin(1.2 + (t ** 1.4) * 23)) * ( 1 - t ) ** 2.8
according to how the output of this function changes, we sampled this function with different interval from 0 to 1.
use the sampled (t, f(t)) pairs to generate the css animation keyframes.
apply the result animation when we need a transition.
with the concept above, easing.css also provides several timing function preset so you can play with. Below is a 15-frames bouncing animations generated via easing.css, you could make it more like a real bounce by increasing the frame count or tweaking the timing function provided:
.your-block {
animation: YourAnimation 2s linear 1s;
}
#keyframes YourAnimation {
0% { height: 7px; }
8% { height: 24px; }
10% { height: 36px; }
17% { height: 99px; }
19% { height: 83px; }
21% { height: 69px; }
24% { height: 57px; }
25% { height: 56px; }
27% { height: 59px; }
34% { height: 100px; }
36% { height: 88px; }
38% { height: 80px; }
48% { height: 100px; }
72% { height: 100px; }
100% { height: 100px; }
}

Answer 2

The animate.css library will give you a more complete setup and you can choose and pick the ones you need, but if you must code your own, use this code I included in a CODEPEN
Basically, you instantiate the bounce effect with the following crossbrowser code. This code establishes the bounce, speed of bounce, and the direction it will bounce. You can choose ease-out if you want to.
Now, Bouncing is a tricky thing. Because it must go up and down until it stops. so the bounces must gradually decrease the height. So, this is why you need #-keyframes, (notice you will need #-webkit-keyframes and #-moz-keyframes, etc for a more complete cross browser development. These keyframes allow you to break the effect at any point. In a bouncing effect in particular, the effect breaks every 10% by reducing it's position in the Y axis (which it means height), until it finally stops.
-webkit-animation: bounce 1200ms ease-in;
-moz-animation: bounce 1200ms ease-in;
-o-animation: bounce 1200ms ease-in;
animation: bounce 1200ms ease-in;
Hope that helps you.
p.s. my code looks a little buggy but you'll have a good enough start. I added your code in your fiddle to it too

Answer 3

Hey as previous suggested animate.css is pretty good with css animations, but to have more control over the animation you can add it with js. You just have to add an small script.
$('.img').hover(function(){
$('.hover').addClass('animated bounceInDown');
}, function() {
$('.hover').removeClass('bounceInDown');
$('.hover').addClass('bounceOutUp');
setTimeout(function() {
$('.hover').removeClass('animated bounceOutUp');
}, 1000);
});
Check out this fiddle example
After that, you just need to play with the values on the .bounceInDown .bounceOutUp keyframes annimation (if you want to).
So that the animation is more or less bouncy
#keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -60px, 0);
transform: translate3d(0, -60px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -800px, 0);
transform: translate3d(0, -800px, 0);
}
}

Answer 4

Another way (with jquery) of doing this will be using jQuery .animate and easing plugin.
<div id="example">
<p class="bounce"></p>
</div>
div {
width: 200px;
height: 200px;
background: red;
}
.bounce {
width: 100%;
height: 0px;
background: rgba(134,12,12,.4);
}
$('#example').on('mouseenter',function(){
$('p').animate(
{ height: "200px" },
1000,
"easeOutBounce"
);
})
[js fiddle example][1] [1]: http://jsfiddle.net/2ra7yumo/2/
It gives you little bit more(or easier) control on the animation.