悬停时的 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

您不必为此使用animation。你可以使用transform:translateX(-12px)

看这里> fiddle

或下面的sn-p：

如果有帮助请告诉我

* {
  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 {
  	-webkit-transform:translateX(-12px);
		transform:translateX(-12px);
          -ms-transform-origin:50% 0%;
  transform-origin:50% 0%;
}

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

Answer 2

不要使用关键帧来执行翻译，而是使用transition 加上cubic-bezier。

$(document).ready(function(){
	$('.menu-icon').click(function(){
		$(this).toggleClass('open');
	});
  
  /*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>