5

In my example, I'm using "Bob" by Ian Lunn. I really like the Hover effect, but as soon as I stop hovering it jolts back to it's original position. How can I ease my div back to it's regular position?

Animation CSS:

animation-name: hvr-bob-float, hvr-bob;
animation-duration: .3s, 1.5s;
animation-delay: 0s, .3s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
animation-direction: normal, alternate;

jsfiddle: http://jsfiddle.net/v3z9rLae/

CSS Apprentice
  • 899
  • 1
  • 16
  • 29
  • 1
    http://stackoverflow.com/questions/30144769/how-to-smoothly-revert-css-animation-to-its-current-state – CBroe Oct 02 '15 at 19:40
  • 1
    Possible duplicate of [Smoothly stop CSS keyframe animation](http://stackoverflow.com/questions/29668238/smoothly-stop-css-keyframe-animation) – Maximillian Laumeister Oct 02 '15 at 19:48
  • 1
    @MaximillianLaumeister - The Answer from "Vals" does appear to solve an issue like mine, but it's not entirely clear (at least to me) what he did in his answer. I'm studying it at the moment and will close this thread as a as soon as I can make sense of his answer. – CSS Apprentice Oct 02 '15 at 20:39

1 Answers1

6

You can use a pseudo-element to make the circle and animate it with hvr-bob. Then use a transition on its parent to simulate the hvr-bob-float animation. It's not great, but it reduces some of the abruptness.

Here's an update to your fiddle

/* Bob */
     @-webkit-keyframes hvr-bob {
      50% {
       -webkit-transform: translateY(4px);
       transform: translateY(4px);
      }
     }
     
     @keyframes hvr-bob {
      50% {
       -webkit-transform: translateY(4px);
       transform: translateY(4px);
      }
     }
    
     .hvr-bob {
      display: inline-block;
            height: 80px;
            width: 80px;
            margin: 2%;
      vertical-align: middle;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
            
            /* use transition on parent */
            -webkit-transition: transform 0.3s ease-out;
            transition: transform 0.3s ease-out;
     }
    
        /* the circle using a pseudo-element */
        .hvr-bob:before {
            content: "";
            display: block;
            background-color: #DDDDDD;
            border-radius: 100%;
            width: 100%;
            height: 100%;
        }
    
        /* use transform on parent */
         .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
            -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
        }
     
     .hvr-bob:hover:before, .hvr-bob:focus:before, .hvr-bob:active:before {
      -webkit-animation-name: hvr-bob;
      animation-name: hvr-bob;
      -webkit-animation-duration: 1.5s;
      animation-duration: 1.5s;
      -webkit-animation-delay: .3s;
      animation-delay: .3s;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-direction: alternate;
      animation-direction: alternate;
     }
<div class="hvr-bob"></div>
Jacob
  • 2,212
  • 1
  • 12
  • 18