Как я могу исчезать и исчезать этот эффект Swing?

я пишу такой код: https://jsfiddle.net/9dgjkc9r/Как я могу исчезать и исчезать этот эффект Swing?

.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>

Но это не имеет исчезать и исчезать, потому что, когда я двигаю мышь в другом положении она отображается некрасивое движением. Я не знаю, как их добавить.

источник

2016-01-26 Niccolò Guidi

Просто начните переход от начального положения и разорвать переход вниз на 4 ключевых кадров, как так:

0% { 
    -webkit-transform: rotate(0deg) 
    } 

    25% { 
    -webkit-transform: rotate(-3deg) 
    } 
    75% { 
    -webkit-transform: rotate(3deg) 
    } 
    100% { 
    -webkit-transform: rotate(0deg) 
    }

Here is the JSFiddle demo

(по крайней мере то, что я понял, у хотел :))

источник

2016-01-26 19:05:25

На старте он работает. Но если я выйду из мыши, это не исчезнет. –

это то, что вы хотите. Скопируйте полный код и попробуйте.

<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>

или если вы хотите сделать FadeIn и из бесконечного времени, то попробуйте этот

<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>

источник

2016-01-26 19:19:52

Прошу прощения, но это не то, что я хочу. В любом случае, спасибо. –

Как я могу исчезать и исчезать этот эффект Swing?

ответ

Смежные вопросы