Google-Material-Design-"Swift-Out"-Easing.markdown

Google Material Design "Swift Out" Easing

Copied from: http://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight

Forked from [gabssnake] (http://codepen.io/gabssnake/pen/cxLKE/).

A Pen by James Delaney on CodePen.

License.

index.html

<h1>swift out</h1>
<div></div>

script.js

/*
Google Material Design "Swift Out" Easing

Forked from [gabssnake] (http://codepen.io/gabssnake/pen/cxLKE/).

 */

style.css

html {
  height: 90%;
  position: relative;
  font-family: sans-serif;
  border-bottom: solid 0em silver;
}

div {
  position: absolute;
  bottom: 2em;
  left: 50.2%;
  height: 2em;
  width: 2em;
  border-radius: 100%;
  background: #f57844;
  transform: translate3d(-50%,0,0);
  animation: bounce 4s cubic-bezier(.55,0,.1,1) normal infinite;
}

h1 {
  bottom: 0; 
  position: absolute;
  font-weight: 300;
  font-style: italic;
  left: 49%;
  margin: auto 0;
  padding-right: 10px;
  opacity: 0.6;
  font-size: 16px;
}

@keyframes bounce {
    0% {bottom: 2em;}
  20% {bottom: 12em;}
  40% {bottom: 12em;}
  60% {bottom: 12em;}
  80% { bottom: 2em; }
}