懸停時的CSS轉換：鼠標懸停時的動畫

我想在懸停時動畫一個css箭頭（指向左側）以便在懸停時略微右移並停留在那裏。一旦鼠標懸停在箭頭上，它也會隨着動畫向後移動。懸停時的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/

來源

2016-09-01 matt

這似乎已經從你的小提琴。 – jedifans

不，只有線是向後動畫，但不是箭頭的位置，如果用鼠標離開，translateX（-12px）向後跳躍而沒有任何反應。在懸停時，它向左移動12px，在鼠標移出時它跳回12px – matt

而不是使用關鍵幀去表演翻譯，請使用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>

來源

2016-09-01 08:44:56 z0mBi3

你不必使用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>

來源

2016-09-01 08:39:23

懸停時的CSS轉換：鼠標懸停時的動畫

回答

相關問題