0

素敵なアニメーションが設定されているので、弾丸が星を撃ち、銃の上にカーソルを置いた後にすべて回転します。すべて正常に機能しますが........

銃からマウスを外すと、星が反対方向に回転します。よくありません:(停止する方法はありますか?

代わりに「アクティブ」を使用しようとしましたが、アニメーションでは機能しません。

CSS

#star {
  width:48px;
  height:49px;
  position:absolute;
  z-index:5;
  left:922px;
  top:63px;
  -webkit-transition: all 4s ease-out;
  -moz-transition: all 4s ease-out;
  -o-transition: all 4s ease-out;
  -ms-transition: all 4s ease-out;
  transition: all 4s ease-out;
}   

#gun:hover ~ #star {
  -webkit-transform:rotateZ(340deg);
  -moz-transform:rotateZ(340deg);
  -o-transform:rotateZ(340deg);
  -ms-transform:rotateZ(340deg);
  transform:rotateZ(340deg);
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -o-transition-delay: 1s;
  -ms-transition-delay: 1s;
  transition-delay: 1
}
4

2 に答える 2

1

transition-delayホバーされていない状態からホバーされた状態への遷移と、ホバーされた状態からホバーされていない状態への遷移に異なるものを指定するだけです。後者の遷移の非常に大きな遅延。

#star {
  /*
  other styles here
  */
  transition-delay: 9999s;
}

トランジションが「一方向」に見えるようにします。JSFiddle の例を次に示します。

于 2013-08-19T21:58:18.857 に答える