CSS Spritesheet animation, clockwise and then anticlockwise - sprite

Question

I want to animate sprite in clockwise and then anti-clockwise continuously.
I am able to do one at a time using two different button.
How can it be done together?
This is what I tried: Codepen
body{
background: #fff;
width: 291px;
margin: 0 auto;
}
.clockwise, .anticlockwise{
color: #000;
cursor: pointer;
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.clockwise{
float: right;
color: #000;
}
.anticlockwise{
float: left;
color: #000;
}
.rotate{
background: url('http://w3bits.com/wp-content/uploads/sprite.png') 0 0 no-repeat;
width: 399px;
height: 200px;
margin: auto;
float: left;
}
.clockwise:hover ~ .rotate{
animation: rotate-clockwise 3s steps(12);
}
.auto{
margin-top: 40px;
color: #fff;
}
.auto:checked ~ .rotate{
animation: rotate-clockwise 3s steps(12);
}
.anticlockwise:hover ~ .rotate{
animation: rotate-anticlockwise 3s steps(12);
}
.auto{
display: inline-block;
margin-left: 0;
}
.auto-rotate{
color: #333;
font-weight: bold;
font-family: sans-serif;
clear: both;
}
#keyframes rotate-clockwise {
0% {background-position: 0 0; }
100% {background-position: 0 -2393px; }
}
#keyframes rotate-anticlockwise {
0% {background-position: 0 -2393px; }
100% {background-position: 0 0; }
}
<input type="checkbox" class="auto" id="auto" >
<label class="auto-rotate" for="auto">Auto ↻</label><br>
<span class="anticlockwise">← A</span>
<span class="clockwise">→ C</span>
<div class="rotate"></div>
Is it possible using only CSS.
Can I flip sprite horizontally to change the direction of cat (sprite) after clockwise and anticlockwise animation ends and then repeat the same.

Answer 1

Not so sure whether this helps, but can't we add all the animations on a single keyframe animation and repeat it infinitely?
I've forked your Pen here and modified it a little: https://codepen.io/mjzeus/pen/oNbGgmP
#keyframes animate-cat {
0% {
background-position: 0 -2393px;
}
20% {
background-position: 0 0;
}
40% {
background-position: 0 -2393px;
}
59% {
transform: scaleX(1);
}
60% {
transform: scaleX(-1);
}
80% {
background-position: 0 0;
transform: scaleX(-1);
}
100% {
background-position: 0 -2393px;
transform: scaleX(-1);
}
}
This is still pretty raw and can be improved a lot but I suppose you'd get the idea what I'm trying to do here. I've just merged all your animations into a single animation and played it on loop.
I hope this helps.

Answer 2

You can flip the cat by adding another class to the (div class="rotate")
.horizontal {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
If you want to automate the process, you would need to add and remove class after fixed time, you can achive this using some JavaScript.
Search for "addClass() Jquery"