CODEWITHSUNDEEP
csscss-animations
CSS Apprentice
CSS Apprentice

Reputation: 939

How To Make CSS Animations Ease Back To Position When No Longer Hovering?

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/

Upvotes: 5

Views: 3179

Answers (1)

Jacob
Jacob

Reputation: 2154

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>

Upvotes: 6

Related Questions