CSS关键帧动画：translateY，不透明度和背景位置在Chrome中不起作用

Question

我似乎无法在Chrome中使用此动画，任何人都可以指出我的错误吗？

第一个动画：容器div（必须绝对定位）反弹到页面上，停留5秒然后反弹。此动画的一次迭代持续15秒，因此div反弹三次。

第二个动画：当包含div处于启用状态且不可见时，内部div会交换图像。我正在使用精灵，只是为精灵的位置设置动画。

JSFiddle：http://jsfiddle.net/jbirthler/e44m2/

这是我正在使用的html：

<div class="relative">
    <div class="animated bounceInDown product-intro">
        <div class="animated colorShift"></div>
    </div>
</div>

CSS：

.relative { position: relative;}

.product-intro {
    position: absolute;
    width: 245px;
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }
    10% {
        opacity: 1;
        transform: translateY(30px);
    }
    15% {
        transform: translateY(-10px);
    }
    30% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(0);
    }
    85% {
        transform: translateY(-10px);
    }
    90% {
        opacity: 1;
        transform: translateY(30px);
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}

@keyframes colorShift {
    0% { background-position: 0 0;}
    33% { background-position: 0 0;}
    34% { background-position: -245px 0;}
    66% { background-position: -245px 0;}
    67% { background-position: -490px 0;}
    100% { background-position: -490px 0;}
}

.animated {
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
       -moz-animation-name: bounceInDown;
            animation-name: bounceInDown;
    -webkit-animation-duration: 5s;
       -moz-animation-duration: 5s;
            animation-duration: 5s;
}

.colorShift {
    height: 550px;
    background: transparent url('http://stage.awesimals.com/wp-content/themes/skeleton_childtheme/assets/img/sprite-awe.png') no-repeat 0 0;
    -webkit-animation-name: colorShift;
       -moz-animation-name: colorShift;
            animation-name: colorShift;
    -webkit-animation-duration: 15s;
       -moz-animation-duration: 15s;
            animation-duration: 15s;
}