CSS Spritesheet animation, clockwise and then anticlockwise

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 &#x21bb;</label><br>
<span class="anticlockwise">&#x2190; A</span>
<span class="clockwise">&#x2192; C</span>
<div class="rotate"></div>

Is it possible using only CSS.

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

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"

Answer 2

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.