1

I've just discovered how to animate elements using the transform property (looks amazing!). I'm running into a bit of trouble with the ease-out part though. As in when I take my mouse off the element it drops back to its original state instantaneously - I'd like to apply the same animation time on the way back down if possible.

The code:

<div class="transform-box">
</div>

.transform-box:hover {
animation: raise 2s; }

@keyframes raise {
0% {
transform: translateY(0); }

100% {
transform: translateY(-150px); }
}

Am I doing this the right way? Or should I be using different properties if I want an equal animation time on it's way up and on it's way back down?

Edit: An example is here: https://www.lonelyplanet.com/france/paris - scroll to the second section where it says 'Top experiences in Paris - is this something achievable with only CSS or does it require Javascript?

I looked at the possible duplicate question and it seems that the answer is only halfway there - it can manage the animation time back to the original state however if the mouse is moved away from the object then it jumps back.

Thanks,

Reskk

Reskk
  • 187
  • 2
  • 4
  • 10
  • Possible duplicate of [CSS3: reverse animation on mouse out after hover](http://stackoverflow.com/questions/16516793/css3-reverse-animation-on-mouse-out-after-hover) – Dekel Oct 13 '16 at 01:10
  • Just had a look at that and it seems that, while the solution is good, it's only halfway there. As in it seems to cancel the ease-out property if one's mouse moves away from the object. – Reskk Oct 13 '16 at 01:18

1 Answers1

1

This can be achieved without js.

.transform-box {
    float:left;
    transition: 2s ease-in-out;
}

.transform-box:hover {
    transform: translateY(-20px);
 }

<div class="transform-box">  
    <img src="https://lonelyplanetimages.imgix.net/mastheads/GettyImages-546212251_medium.jpg" width="300px">
</div>

Check out this page. http://www.the-art-of-web.com/css/css-animation/

RSSM
  • 669
  • 7
  • 19