CSSのホバリングの切り替え：マウスの動きのアニメーション

Question

ホバー上のCSS矢印（左を指す）を動かして、ホバー上を少し右に移動してそこにとどまりたいと思います。マウスが矢印の外に出ると、それはアニメーションとともに後方に移動するはずです。

@-webkit-keyframes arrow-left { 
    0% { 
     -webkit-transform: translateX(0); 
     transform:translateX(0); 
    } 
    20% { 
     -webkit-transform:translateX(0); 
     transform:translateX(0); 
    } 
    100% { 
     -webkit-transform:translateX(-12px); 
     transform:translateX(-12px); 
    } 
} 

@keyframes arrow-left { 
    0% { 
     -webkit-transform:translateX(0); 
     transform:translateX(0); 
    } 
    20% { 
     -webkit-transform:translateX(0); 
     transform:translateX(0); 
    } 
    100% { 
     -webkit-transform:translateX(-12px); 
     transform:translateX(-12px); 
    } 
} 

.arrow-icon.left:hover { 
    -webkit-animation:arrow-left 0.35s ease-in; 
    animation:arrow-left 0.35s ease-in; 
    -webkit-transform-origin:50% 0%; 
    -ms-transform-origin:50% 0%; 
    transform-origin:50% 0% 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

どのようにアニメーションを作成するかについてのアイデアもありますので、アニメーションが戻ってジャンプしませんか？

https://jsfiddle.net/gsvjwxxj/

Answer 1

代わりのキーフレームを使用して助けなら、私に知らせて実行する翻訳するには、transitionとcubic-bezierを使用してください。

$(document).ready(function(){ 
 
\t $('.menu-icon').click(function(){ 
 
\t \t $(this).toggleClass('open'); 
 
\t }); 
 
    
 
    /*setTimeout(function() { 
 
     $('.mouse-icon').fadeOut(250, function() { $(this).remove(); }); 
 
    }, 5000);*/ 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    margin: 100px; 
 
} 
 

 
/* ---------------------------------------------- /* 
 
* Animated arrow icon 
 
/* ---------------------------------------------- */ 
 
.arrow-icon { 
 
    position: relative; 
 
    width:26px; 
 
    height:4px; 
 
    background:#000; 
 
    cursor: pointer; 
 
    -webkit-transition: width .15s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.42, 0.08, 0.18, -0.24); 
 
    -moz-transition: width .15s ease-in-out, -moz-transform 0.3s cubic-bezier(0.42, 0.08, 0.18, -0.24); 
 
    -o-transition: width .15s ease-in-out, -o-transform 0.3s cubic-bezier(0.42, 0.08, 0.18, -0.24); 
 
    transition: width .15s ease-in-out, transform 0.3s cubic-bezier(0.42, 0.08, 0.18, -0.24); 
 
} 
 

 
.arrow-icon.left:hover, .arrow-icon.right:hover { 
 
    width:36px; 
 
} 
 

 
.arrow-icon.down:hover, .arrow-icon.up:hover { 
 
    height:36px; 
 
} 
 

 
.arrow-icon.down:hover:after{ 
 
    top: 15px; 
 
} 
 

 
.arrow-icon:before { 
 
    position:absolute; 
 
    content:""; 
 
} 
 

 
.arrow-icon.left:before, .arrow-icon.right:before { 
 
    width: 52px; 
 
    height: 26px; 
 
} 
 

 
.arrow-icon.down:before, .arrow-icon.up:before { 
 
    width: 26px; 
 
    height: 52px; 
 
} 
 

 
.arrow-icon:before { 
 
    position:absolute; 
 
    content:""; 
 
    width: 52px; 
 
    height: 26px; 
 
} 
 

 
.arrow-icon.left:before { 
 
    top: -12px; 
 
    left: -12px; 
 
} 
 

 
.arrow-icon.right:before { 
 
    top: -12px; 
 
    left: -12px; 
 
} 
 

 
.arrow-icon.down:before { 
 
    top: -12px; 
 
    left: -12px; 
 
} 
 

 
.arrow-icon.up:before { 
 
    top: -12px; 
 
    left: -12px; 
 
} 
 

 
.arrow-icon:after { 
 
    position:absolute; 
 
    content:""; 
 
    transform:rotate(45deg); 
 
    top:-8px; 
 
    width:16px; 
 
    height:16px; 
 
    background:transparent; 
 
    border-color: #000; 
 
} 
 

 
.arrow-icon.left:after{ 
 
    border-left:4px solid; 
 
    border-bottom:4px solid; 
 
} 
 

 
.arrow-icon.right:after{ 
 
    right:0; 
 
    border-right:4px solid; 
 
    border-top:4px solid; 
 
} 
 

 
.arrow-icon.down, .arrow-icon.up { 
 
    width: 4px; 
 
    height: 26px; 
 
    left: 10px; 
 
} 
 

 
.arrow-icon.down:after{ 
 
    top: 6px; 
 
    left:-8px; 
 
    border-right:4px solid; 
 
    border-bottom:4px solid; 
 
} 
 

 
.arrow-icon.up:after { 
 
    top:0px; 
 
    left:-8px; 
 
    border-right:4px solid; 
 
    border-top:4px solid; 
 
    transform:rotate(-45deg); 
 
} 
 

 
.arrow-icon.left{ 
 
    -webkit-transform-origin:50% 0%; 
 
    -ms-transform-origin:50% 0%; 
 
    transform-origin:50% 0%; 
 
} 
 

 
.arrow-icon.left:hover { 
 
    transform:translateX(-12px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="arrow-icon left"></div>

Answer 2

あなたは、このためにanimationを使用する必要はありません。あなただけのtransform:translateX(-12px)

はこちらをご覧使用することができます>fiddle

または下スニペット：

は、それが

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    margin: 100px; 
 
} 
 

 
/* ---------------------------------------------- /* 
 
* Animated arrow icon 
 
/* ---------------------------------------------- */ 
 
.arrow-icon { 
 
    position: relative; 
 
    width:26px; 
 
    height:4px; 
 
    background:#000; 
 
    cursor: pointer; 
 
    -webkit-transition: .15s ease-in-out; 
 
    -moz-transition: .15s ease-in-out; 
 
    -o-transition: .15s ease-in-out; 
 
    transition: .15s ease-in-out; 
 
} 
 

 
.arrow-icon.left:hover, .arrow-icon.right:hover { 
 
    width:36px; 
 
} 
 

 

 

 
.arrow-icon:before { 
 
    position:absolute; 
 
    content:""; 
 
} 
 

 
.arrow-icon.left:before, .arrow-icon.right:before { 
 
    width: 52px; 
 
    height: 26px; 
 
} 
 

 

 

 
.arrow-icon:before { 
 
    position:absolute; 
 
    content:""; 
 
    width: 52px; 
 
    height: 26px; 
 
} 
 

 
.arrow-icon.left:before { 
 
    top: -12px; 
 
    left: -12px; 
 
} 
 

 

 
.arrow-icon:after { 
 
    position:absolute; 
 
    content:""; 
 
    transform:rotate(45deg); 
 
    top:-8px; 
 
    width:16px; 
 
    height:16px; 
 
    background:transparent; 
 
    border-color: #000; 
 
    -webkit-transition: .1s ease-in-out; 
 
    -moz-transition: .1s ease-in-out; 
 
    -o-transition: .1s ease-in-out; 
 
    transition: .1s ease-in-out; 
 
} 
 

 
.arrow-icon.left:after{ 
 
    border-left:4px solid; 
 
    border-bottom:4px solid; 
 
} 
 

 

 

 

 

 

 

 

 

 
.arrow-icon.left:hover { 
 
    \t -webkit-transform:translateX(-12px); 
 
\t \t transform:translateX(-12px); 
 
      -ms-transform-origin:50% 0%; 
 
    transform-origin:50% 0%; 
 
}

<div class="arrow-icon left"></div>