Reputation: 195
I write my code like this: https://jsfiddle.net/9dgjkc9r/
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
@-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
<div class="question"></div>
But it doesn't have a fade in and fade out because when I move the mouse in another position it's displayed an ugly movement. I don't know how to add them.
Upvotes: 0
Views: 349
Reputation: 5108
is this what you want.copy full code and try it.
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
@-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
</style>
<body>
<div class="question"></div>
<script type="text/javascript">
$(document).ready(function(){
$("div.question").mouseenter(function(){
$(this).fadeOut(1000).fadeIn(1000);
});
});
</script>
</body>
</html>
or if you want to do fadein and out infinite time, then try this
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
@-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
</style>
<body>
<div class="question"></div>
<script type="text/javascript">
$(document).ready(function(){
check(1000);
});
function check(i)
{
$(".question").fadeOut(1000).fadeIn(1000);
setTimeout("check()",i);
}
</script>
</body>
</html>
Upvotes: 0
Reputation: 8396
Just start the transition from the initial position and break the transition down into 4 keyframes like so:
0% {
-webkit-transform: rotate(0deg)
}
25% {
-webkit-transform: rotate(-3deg)
}
75% {
-webkit-transform: rotate(3deg)
}
100% {
-webkit-transform: rotate(0deg)
}
(At least what I understood u wanted :) )
Upvotes: 1