CSS Spritesheet动画，顺时针，然后逆时针。

Question

我想以顺时针和逆时针方向连续制作精灵动画。

我可以用两个不同的按钮一次做一个。

怎样才能一起完成呢？

这是我试过的。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>

是否可以只用CSS。

2. 我可以在顺时针和逆时针动画结束后，水平翻转sprite来改变猫（sprite）的方向，然后重复同样的动作。

Answer 1

你可以翻转的猫通过添加另一个类的（div类="旋转"）。

.horizontal {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

如果你想自动完成这个过程，你需要在固定的时间内添加和删除类，你可以使用一些JavaScript来实现。

搜索 "addClass()Jquery"

Answer 2

不知道是否有帮助，但是我们是不是可以把所有的动画都加在一个关键帧动画上，然后无限重复？

我把你的Pen在这里分叉了，修改了一下。https:/codepen.iomjzeuspenoNbGgmP。

@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);
  }
}

这还是很原始的，可以改进很多，但我想你会明白我想做什么。我只是把你所有的动画合并成一个动画并循环播放。

希望对你有所帮助。