I have a css transition that moves an element on hover and an animation that rotates the element on hover too. There's a delay on the animation equal to the transition duration so that after it's transitioned to it's correct position, the animation starts. And it works nice, however, when we mouse off, the animation stops but it doesn't transition back down.
Is it possible to get it to transition back after we mouse off and the animation ends?
You can see an example here: http://codepen.io/jhealey5/pen/zvXBxM
Simplified code here:
div {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #b00;
position: relative;
&:hover {
span {
transform: translateY(-60px);
animation-name: rotate;
animation-duration: 1s;
animation-delay: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
}
}
span {
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
bottom: 10px;
left: 0;
right: 0;
margin: auto;
transition: .5s;
}
@keyframes rotate {
from {
transform: translateY(-60px) rotate(0);
}
to {
transform: translateY(-60px) rotate(-90deg);
}
}
Best Answer
I have forked your project and adapted it so it works. You can find it here.
What I have changed is the following:
I give the white square a start position of
top: 150px
and let it, onhover
ofdiv
, get atop: 0
. The span gets atransition: top .5s
and with that it goes totop: 0;
on hover and back totop: 150px;
when the mouse leaves.I have removed the
translateY(-60px);
from the animation, because that would move it even more up when theanimation
would start.Here's your new CSS:
Edit: The problem is that an animation is time-based and not action-based, which means that as soon as you trigger an animation, a timer starts running and it will run through all the
keyframes
until the set time has passed. Hover-in and hover-out have no effect, except that the timer can be stopped prematurely, but the animation will not continue (or reversed, which you wanted) after that.transition
is action-based, which means it gets triggered every time an action (for example:hover
) is happening. On:hover
, this means it takes .5s to go totop:0
and when the hover ends, it takes .5s to got totop:150px
.I hope the above addition makes sense :)
As you can see, I also cleaned up a bit in your
animation-name:
etc., since it can be combined into one line.