Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Liam Nolan
Liam Nolan
9,826 Points

CSS Animation snap back after hover

I'm doing an animation on my site for an image to launch up and off the page when the user hovers over a section.

Here is my code:

.launch-feature:hover .launch-image {
    -webkit-animation: launch-animation 1.5s linear forwards;
  }

  @-webkit-keyframes launch-animation {
    0%    { -webkit-transform: rotate(0) translateY(0); }
    20%   { -webkit-transform: rotate(-40deg) translate(15%, -20%); }
    40%   { -webkit-transform: rotate(-40deg) translate(30%, -40%); }
    70%    { -webkit-transform: rotate(-40deg) translate(50%, -70%); opacity: 0.8; }
    100%  { -webkit-transform: rotate(-40deg) translate(160%, -200%); opacity: 0; }
  }

The animation works, but is there a way to either keep the image off the page when the user stops hovering, or transition it smoothly back to it's starting position?

2 Answers

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

after linear should be an iteration. You can use words like infinite or numbers like 1, 2, 3 etc. so just place a 1 after linear

Liam Nolan
Liam Nolan
9,826 Points

I have put the 1 in but I think that is the default anyway. The image still jumps back to the start position when I move out of the hover space.

See what I mean at www.depositbee.com the animation when hovering over the "Launching Disputes" section.

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

I'm sorry, you're absolutely right. You keyframes however 100% says go full cycle try stopping at 50 or 70% whichever position leaves it off screen.