CODEWITHSUNDEEP
htmlcsscss-transitions
matt
matt

Reputation: 44293

CSS Transition on hover: animate mouse-out as well

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/

Upvotes: 0

Views: 1899

Answers (2)

z0mBi3
z0mBi3

Reputation: 1544

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>

Upvotes: 2

Mihai T
Mihai T

Reputation: 17687

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>

Upvotes: 1

Related Questions