CSS Transition on hover: animate mouse-out as well - html

Question

I want to animate a css-arrow (pointing to the left) on hover to move slightly right on hover and stay there. Once the mouse hovers out the arrow it should move backwards with the animation as well.
#-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;
}
Any idea on how to make the animation out work as well, so it animates back and doesn't jump back?
https://jsfiddle.net/gsvjwxxj/

Answer 1

Instead of using keyframes to perform the translate, use transition plus 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>

Answer 2

you don't have to use animation for this. you can just use transform:translateX(-12px)
see here > fiddle
or snippet below :
let me know if it helps
* {
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>