JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hvr-bob"></div>

CSS

div {
    background-color: #DDDDDD;
    border-radius: 100%;
    height: 50px;
    margin: 2%;
    padding: 2%;
    width: 50px;
}

/* Bob */
	@-webkit-keyframes hvr-bob {
		0% {
			-webkit-transform: translateY(-8px);
			transform: translateY(-8px);
		}
		
		50% {
			-webkit-transform: translateY(-4px);
			transform: translateY(-4px);
		}
		
		100% {
			-webkit-transform: translateY(-8px);
			transform: translateY(-8px);
		}
	}
	
	@keyframes hvr-bob {
		0% {
			-webkit-transform: translateY(-8px);
			transform: translateY(-8px);
		}
		
		50% {
			-webkit-transform: translateY(-4px);
			transform: translateY(-4px);
		}
		
		100% {
			-webkit-transform: translateY(-8px);
			transform: translateY(-8px);
		}
	}
	
	@-webkit-keyframes hvr-bob-float {
		100% {
			-webkit-transform: translateY(-8px);
			transform: translateY(-8px);
		}
	}
	
	@keyframes hvr-bob-float {
		100% {
			-webkit-transform: translateY(-8px);
			transform: translateY(-8px);
		}
	}
	
	.hvr-bob {
		display: inline-block;
		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;
	}
	
	.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
		-webkit-animation-name: hvr-bob-float, hvr-bob;
		animation-name: hvr-bob-float, hvr-bob;
		-webkit-animation-duration: .3s, 1.5s;
		animation-duration: .3s, 1.5s;
		-webkit-animation-delay: 0s, .3s;
		animation-delay: 0s, .3s;
		-webkit-animation-timing-function: ease-out, ease-in-out;
		animation-timing-function: ease-out, ease-in-out;
		-webkit-animation-iteration-count: 1, infinite;
		animation-iteration-count: 1, infinite;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-direction: normal, alternate;
		animation-direction: normal, alternate;
	}