0
<!DOCTYPE html>
<html>
<head>
<title>Alive Time</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="code.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</head>
<body>
<i class="fa fa-cog" style="font-size:100px"></i>
<i class="fa fa-arrow-right" style="font-size:100px"></i>
</body>
</html>
----------------------------------------------------------------------------
.fa-cog{
margin: 10% 50%;
color: red;
/*-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;*/
}
.down {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
--------------------------------------------------------------------------------------------------------------
$(document).ready(function(){
$(".fa-cog").on('mouseenter',function(){
$(this).animate({rotate:180},{
step:function(now,fx){
/*$(this).css({' -moz-transform':'rotate('+now+'deg)',
'-webkit-transform':'rotate('+now+'deg)',
'transform':'rotate('+now+'deg)'});*/
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
$(this).css('transform','rotate('+now+'deg)');
},duration:'slow'},'linear');
});
});
Guys私はコグを回転させるためにjqueryのanimate（）メソッドを使用しようとしています。私は、あるクラスにいくつかのトランジションを使用させ、トランスフォームしてからそのクラスを追加または削除できるようにすることができます。しかし、私はここでanimate（）を使いたい。 stackoverflowのドキュメントのいくつかは、実際にはテキストインデックスや枠線のような実際のCSSプロパティを使用する必要はなく、ローテーションやmy-awesome-propertyなどの偽のCSSプロパティを指定できると述べています。将来、実際のCSSプロパティになる危険性のないものを使用することをお勧めします。私はすべてのことを私のコードで間違いを見つけるcouldntを試みた。私がコメントアウトしたコードは無視してください。