Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create CSS3 bounce effect

I am trying to add a bounce effect to the end of the animation without using any 3rd party code or javascript. I managed to create the animation but could not achieve the bounce effect.

This is what I have done so far:

HTML:

<div></div>
<div></div>
<div></div>

CSS:

div {
    background:  tomato;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in;
    transform-origin: top left;
}
div:hover { 
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5);
}

DEMO

like image 838
It worked yesterday. Avatar asked Apr 22 '15 01:04

It worked yesterday.


People also ask

How do you add a bounce animation?

Steps for Creating Bounce AnimationGo to the app -> res right click on res folder then New -> Android Resource Directory and create an anim Directory. Then right-click on anim folder then go to New -> Animation Resource File and create a bounce. xml file. bounce.

What is bounce animation?

Bounce Animation effect is used to move the element quick up, back, or away from a surface after hitting it.


2 Answers

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>

You can find a few examples of other easings at easings.net, or a full cubic-bezier editor at cubic-bezier.com.

like image 103
Henrik Karlsson Avatar answered Sep 30 '22 18:09

Henrik Karlsson


I'm a fan of animate.css

http://daneden.github.io/animate.css/

Coincidentally, the first animation is bounce.

You can extract the code you need from the css file.

Using the animate.css framework i've extracted their bounce animation and have created a snippet 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;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

div{background:red; padding:50px;}
<div class="bounce animated">bounce</div>
like image 32
xengravity Avatar answered Sep 30 '22 17:09

xengravity