html - アニメーションの不具合

Question

私の画像では、いくつかの誤動作があります。まず、すべてが機能するようにしました。次に、1 つのクラスを 5 つの異なるクラスに変更したので、すべてのクラスに影響を与えることなく個別にサイズを変更できます。唯一の問題は、私がそれを行ったので、写真が回転せず、テキストだけが最初のものを除いていることです. また、画像のサイズをかなり大きくするためにサイズを変更すると、完全に回転しません。最初はアニメーションの問題かと思いましたが、サイズに関係なく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度回転するように設定されているので、よくわかりません。

残念ながら、あなたの質問の 2 番目の部分のように振る舞うものは何も見えません。ギャラリー プラグインが添付されていますか? Chrome Canary と FireFox の両方でウェブページをテストしました