1

私のウェブサイトで遊べるちょっとした楽しいおもちゃを作ろうとしています。基本的に、ロゴの上にカーソルを合わせると、カーソルを離すまでロゴが回転します。CSS3で回転を使用してこれを達成しましたが、機能しています。しかし、「スナップバック」を防ぐ方法があるかどうか疑問に思っていました（即座にジャンプするのではなく、ホバーを外すときに元の位置にスムーズに戻します）

私が使用しているコードはこれです：

    #logo1:hover{
    -webkit-animation: spin 0.7s infinite linear;
-moz-animation: spin 0.7s infinite linear;
-o-animation: spin 0.7s infinite linear;
-ms-animation: spin 0.7s infinite linear;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}

どんな助けにも感謝します！

4

1 に答える 1

1

あなたがしようとしていることは、CSS3 変換を使用するだけで簡単に実現できます。0 度から 360 度まで開始しているため、ここではアニメーションは必要ありません。これを試してください。

.class {
   -moz-transform: rotate(0deg);
   /* Add up other required proprietary properties here */
   transition: all 1s; /* This will handle the transition to be 
                          smooth on mouse out */
}

.class:hover {
   -moz-transform: rotate(360deg);
   /* Add up other required proprietary properties here and 
      transition property is not required here */
}
于 2013-03-30T21:15:59.437 に答える