我如何用不同的按钮制作不同的精灵动画?(HTML / CSS)

我一直在尝试使用不同的onClick按钮触发器来动画这个精灵。只有一个按钮能用。但在我的文件版本的其他按钮工作，但他们只工作一次，它不会重置。(在一些按钮播放，但只有在一定的顺序，然后我不能再次按下它们)我假设removeClass将删除它在一定的时间后，它会返回到原始状态，这样我就可以点击另一个按钮，它会从一开始就重复动画。

   <div class="bannerimg" div id="bannerimg"></div>
   <div id="sunbutton" class="sunbutton"></div>
   <div id="waterbutton" class="waterbutton"></div>
   <div id="foodbutton" class="foodbutton"></div>

$('#sunbutton').click(function() 
    {
    $('.bannerimg').addClass('suncheck');
        setTimeout(function() 
            { $(this).removeClass('suncheck'); }
        , 1000);
    });
$('#waterbutton').click(function() 
    {
    $('.bannerimg').addClass('watercheck');
        setTimeout(function() 
            { $(this).removeClass('watercheck'); }
        , 2000);
    });
$('#foodbutton').click(function() 
    {
    $('.bannerimg').addClass('foodcheck');
        setTimeout(function() 
            { $(this).removeClass('foodcheck'); }
        , 1);
    });

.bannerimg {
    background-image: url(http://www.elainemcheung.com/wp-content/uploads/2014/03/sprite.png);
    width: 669px;
    height: 560px;
}
.suncheck {
    animation: sun steps(7) 1s infinite;
    -webkit-animation: sun steps(7) 1s infinite;
    -moz-animation: sun steps(7) 1s infinite;
}
@keyframes sun {
    0% {background-position: 0 0; }
    100% {background-position: -4683px 0;}
}
@-webkit-keyframes sun {
    0% {background-position: 0 0; }
    100% {background-position: -4683px 0;}
}
@-moz-keyframes sun {
    0% {background-position: 0 0; }
    100% {background-position: -4683px 0;}
}
.foodcheck {
    animation: food 3s steps(12) 0.15s infinite;
    -webkit-animation: food 3s steps(12) 0.15s infinite;
    -moz-animation: food 3s steps(12) 0.15s infinite;
}
@keyframes food {
    0% {background-position: 0 -560; }
    100% {background-position: -8028px -560;}
}
@-webkit-keyframes food {
    0% {background-position: 0 -560; }
    100% {background-position: -8028px -560;}
}
@-moz-keyframes food {
    0% {background-position: 0 -560; }
    100% {background-position: -8028px -560;}
}
.watercheck {
    animation: water steps(15) 2s infinite;
    -webkit-animation: water steps(15) 2s infinite;
    -moz-animation: water steps(15) 2s infinite;
}
@keyframes water {
    0% {background-position: 0 -1120; }
    100% {background-position: -10035px -1120;}
}
@-webkit-keyframes water {
    0% {background-position: 0 -1120; }
    100% {background-position: -10035px -1120;}
}
@-moz-keyframes water {
    0% {background-position: 0 -1120; }
    100% {background-position: -10035px -1120;}
}
.sunbutton {
    position:relative;
    margin:10px auto;
    color: white;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    font-size: .9em;
    cursor: pointer;
}
.sunbutton:after {
    top: 0px;
    left: 500px;
    position: absolute;
    display: block;
    padding: 5px 0;
    width: 125px;
    border: 1px solid #894603;
    border-radius: 4px;
    background: linear-gradient(to bottom,rgba(247,147,30,1) 0%,rgba(216,123,25,1) 44%,rgba(168,94,20,1) 100%);
    box-shadow: 0px 0px 10px rgba(0,0,0,.6);
    font-family: 'Duru Sans', sans-serif;
    content: "SUN ME";
}
.waterbutton {
    position:relative;
    margin:10px auto;
    color: white;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    font-size: .9em;
    cursor: pointer;
}
.waterbutton:after {
    top: 0px;
    left: 275px;
    position: absolute;
    display: block;
    padding: 5px 0;
    width: 125px;
    border: 1px solid #63072D;
    border-radius: 4px;
    background: linear-gradient(to bottom,rgba(212,20,90,1) 0%,rgba(181,21,86,1) 44%,rgba(140,16,66,1) 100%);
    box-shadow: 0px 0px 10px rgba(0,0,0,.6);
    font-family: 'Duru Sans', sans-serif;
    content: "WATER ME";
}
.foodbutton {
    position:relative;
    margin:10px auto;
    color: white;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    font-size: .9em;
    cursor: pointer;
}
.foodbutton:after {
    top: 0px;
    left: 50px;
    position: absolute;
    display: block;
    padding: 5px 0;
    width: 125px;
    border: 1px solid #321559;
    border-radius: 4px;
    background: linear-gradient(to bottom,rgba(131,94, 170,1) 0%,rgba(100,76,132,1) 44%,rgba(69,48,96,1) 100%);
    box-shadow: 0px 0px 10px rgba(0,0,0,.6);
    font-family: 'Duru Sans', sans-serif;
    content: "FEED ME";
}

JSFIDDLE: http://jsfiddle.net/22Skk/