如何让CSS动画在不再徘徊时轻松回归？

Question

在我的例子中,我正在使用Ian Lunn的"Bob".我真的很喜欢悬停效果,但是当我停止徘徊时,它会回到原来的位置.我怎样才能让我的div恢复到常规位置？

动画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/

Answer 1

您可以使用伪元素制作圆圈并使用它制作动画hvr-bob.然后在其父级上使用转换来模拟hvr-bob-float动画.它不是很好,但它减少了一些突然性.

这是你的小提琴的更新

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