Added more info to the keyframes docs (#168)

Copied the keyframe example from emotion.sh and added interpolation and a regular `css` example.

docs/keyframes.md

@@ -1,21 +1,39 @@
 ## Keyframes
 
+If you need more control over an animation, you can use `keyframes` with the same JS interpolation as `css`.
+The `keyframes` function takes in the css keyframes definition and returns the animation name so that you can include it in other styles. This is similar to how `css` takes in styles and returns the className that you can use to apply the styles.
+
 ```jsx
-import { keyframes } from 'emotion'
+import { keyframes, css } from 'emotion'
 import styled from 'emotion'
 
+const bounceHeight = 30;
+
 // This returns a animation
 const bounce = keyframes`
-  from {
-    transform: scale(1.01);
+  from, 20%, 53%, 80%, to {
+    transform: translate3d(0,0,0);
   }
-  to {
-    transform: scale(0.99);
+
+  40%, 43% {
+    transform: translate3d(0, -${bounceHeight}px, 0);
+  }
+
+  70% {
+    transform: translate3d(0, -${bounceHeight / 2}px, 0);
+  }
+
+  90% {
+    transform: translate3d(0, -${bounceHeight / 4}px, 0);
   }
 `
 
 // You can use them in styled components or anything else
 const AnimatedDiv = styled.div`
-  animation: ${bounce} 0.2s infinite ease-in-out alternate;
+  animation: ${bounce} 1s ease infinite;
+`
+
+const slowBounce = css`
+  animation: ${bounce} 5s ease 1;
 `
 ```