How to make CSS animations simpler if no longer hanging?

Question

In my example, I use "Bob" by Jan Lunn . I really like the Hover effect, but as soon as I stop soaring, it returns to its original position. How can I lighten my div back to its regular position?

CSS Animation:

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/

Answer 1

You can use the pseudo-element to make a circle and animate it with hvr-bob . Then use the transition on your parent to simulate the hvr-bob-float animation. This is not great, but it reduces some sharpness.

Here is an update to your violin

 /* 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>