对同一类型的多个元素使用css3动画属性“alternate”

Question

我已经设置了3个div来以波浪形的方式制作动画。动画本身工作正常但是当我尝试使用 alternate 属性来反转动画时，我会遇到问题。是否有一些我没做的让他们以波动的方式扭转？

http://jsfiddle.net/Jn875/3/

HTML

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

CSS

@-webkit-keyframes wave {
      0%, 100% {-webkit-transform: scaleY(1);}
      50% {-webkit-transform: scaleY(2);}
}

@-moz-keyframes wave {
      0%, 100% {-moz-transform: scaleY(1);}
      50% {-moz-transform: scaleY(2);}
}

@-ms-keyframes wave {
      0%, 100% {-ms-transform: scaleY(1);}
      50% {-ms-transform: scaleY(2);}
}

@-o-keyframes wave {
      0%, 100% {-o-transform: scaleY(1);}
      50% {-o-transform: scaleY(2);}
}

@keyframes wave {
      0%, 100% {transform: scaleY(1);}
      50% {transform: scaleY(2);}
}

body {
    padding: 150px;
}

div {
    -webkit-animation: wave 1s alternate;
    -moz-animation: wave 1s alternate;
    -ms-animation: wave 1s alternate;
    -o-animation: wave 1s alternate;
    animation: wave 1s alternate;
    -webkit-transform-origin: bottom; 
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
    background: gray; 
    display: inline-block; 
    margin-left: 20px; 
    height: 100px; 
    width: 100px;
}

div:first-of-type { 
     margin-left: 0px;
}

div:nth-of-type(2) { 
    -webkit-animation-delay:.5s;
    -moz-animation-delay:.5s;
    -ms-animation-delay:.5s;
    -os-animation-delay:.5s;
    animation-delay:.5s;
}

div:nth-of-type(3) { 
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -os-animation-delay: 1s;
    animation-delay: 1s;
}