Combination Effects in Animation docs needs clarification

Based on the docs for [Animations, Combination Effects](https://github.com/zurb/motion-ui/blob/master/docs/animations.md#combination-effects), I tried to create two new classes:

``` scss
.slideupfadein {
@include mui-animation(fade, slide($direction: up, $amount: 120%));
}
.slidedownfadeout {
@include mui-animation(fade(1,0), slide($direction: down, $amount: 120%));
}
```

These generate the CSS:

``` css
.slideupfadein {
animation-name: custom-1; }

@keyframes custom-1 {
0% {
opacity: 0;
transform: translateY(120%); }
100% {
opacity: 1;
transform: translateY(0); } }

.slidedownfadeout {
animation-name: custom-3; }

@keyframes custom-3 {
0% {
opacity: 1;
transform: translateY(-120%); }
100% {
opacity: 0;
transform: translateY(0); } }
```

In the HTML, I have:

``` html

```

Finally, in the JavaScript console in Google Chrome, I issue the following:

``` js
var div = $('#motion-example-3')
Foundation.Motion.animateOut(div, 'fade-out') // kitty fades out
Foundation.Motion.animateIn(div, 'fade-in') // kitty fades in
Foundation.Motion.animateIn(div, 'slideupfadein') // kitty does nothing
Foundation.Motion.animateOut(div, 'slidedownfadeout') // kitty does nothing. bad kitteh!
```

Is this a bug or is documentation incomplete?