this questionとそれぞれthis JSFiddleを参照しています。私は、マウスアウト時にアイコンを逆に回転させたいと思っています。助言がありますか？マウスのアウト時にアイコンスピン
.fa-spin-hover:hover {
-webkit-animation: spin 1s 1 linear;
-moz-animation: spin 1s 1 linear;
-o-animation: spin 1s 1 linear;
animation: spin 1s 1 linear;
}
<i class="fa fa-circle-o-notch fa-spin-hover" style="font-size:100px"></i><br />
これを試してください。これは少しjavascriptとCSSを使用しています。 これでいくつかのアイデアを得ることができます。
$(".circle").mouseover(function(){
$(".circle").removeClass("reverse").addClass("hover");
}).mouseout(function(){
$(".circle").removeClass("hover").addClass("reverse");
});.hover {
-ms-transform: rotateX(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-ms-transition:1s all;
-webkit-transition:1s all;
transition:1s all;
}
.reverse {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-ms-transition:1s all;
-webkit-transition:1s all;
transition:1s all;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<i class="fa fa-circle-o-notch circle" style="font-size:100px"></i>
</body>
</html>
あなたはJSソリューションを気にしますか？ – TricksfortheWeb
CSSのみのソリューションがあれば、それは大歓迎です。 – Ben
アイコンはデフォルトで左に回転し、ホバーでは右に回転しますが、CSSには 'mouseOut（）'と同等のものはありません。 **ホバリングを離れると**逆の方向に回転します**。 –