动画故障

Question

使用我的图像，我遇到了一些故障。我所做的一切都很好，然后我将一个班级变成了五个不同的班级，所以我可以单独改变他们的大小，而不会影响他们。唯一的问题是，现在我这样做了，图片不是旋转的，只是文字是第一个。此外，当我将图像调整到相当大的尺寸时，我将不会一直旋转。起初我认为这是动画的问题，但我不太确定，因为它设置为180度旋转，无论大小如何都应该发生。我的网站在http://spencedesign.netau.net/singapore-gallery.html，我想要布置图片的方式是

Answer 1

图标动画中的错误是由于您为.icon1元素指定了 而导致的，您还必须重复所有其他图标：

li:hover .icon1, li:hover .icon2, li:hover .icon3, li:hover .icon4, li:hover .icon5, li:hover .label {

  -webkit-transform:translateZ(-32px) rotateY(180deg);

  -webkit-animation-duration:0.33s;
  -webkit-animation-name:rotateOut;
  -webkit-animation-timing-function:linear;
  -webkit-animation-fill-mode:forwards;

}

这是一个相当尴尬的CSS构造，但很难保持，我想你应该将基于通用类的CSS动画规则给予每个元素，并为每个元素提供另一个类来根据需要单独选择它，类似于这样：

/* CSS */
.icon-bar li:hover .icon, .icon-bar li:hover .icon-label { 

   your animation code here
}

<!-- HTML -->

<ul class="icon-bar">
<li>
  <span class="icon first-icon"></span>
  <span class="label">item 1</span>
</li>
<li>
  <span class="icon second-icon"></span>
  <span class="label">item 2</span>
</li>
<li>
  <span class="icon third-icon"></span>
  <span class="label">item 3</span>
</li>
<li>
  <span class="icon fourth-icon"></span>
  <span class="label">item 4</span>
</li>
<li>
  <span class="icon fifth-icon"></span>
  <span class="label">item 5</span>
</li>
</ul>

---

  

另外，当我将图像调整到相当大的尺寸时，我将不会一直旋转。起初我认为这是动画的问题，但我不太确定，因为它设置为180度旋转，无论大小如何都应该发生。

不幸的是，我看不到任何表现得像你问题的第二部分，是否有附加的插件插件？我已经使用Chrome Canary和FireFox测试了您的网页