Combination Effects in Animation docs needs clarification

[stevepiercy]

Based on the docs for Animations, Combination Effects, I tried to create two new classes:

.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:

.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:

<img id="motion-example-3" src="//placekitten.com/300/300">

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

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?