CSS Spinner Erratic animation effect

CSS Spinner Erratic animation

Erratic spinner animation effect coded in CSS for a HTML element using the CSS property transform and its function tranform#translate.

<style>
.spinner-erratic {
	/* Uncomment as needed. */
	/* width: 100px; */
	/* height: 100px; */
	/* background-color: deeppink; */
	animation-name: spinner-erratic;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	
}
			
@keyframes spinner-erratic {
	0% {    transform: translate(0, -50%) }
	6.25% { transform: translate(30%, -19%) }
	12.5% { transform: translate(35.46%, -35.46%) ; }
	18.25% { transform: translate(30%, -15.56%) }
	25% {   transform: translate(50%, 0) ; }
	31.25% { transform: translate(30%, 15.56%) }
	37.5% { transform: translate(35.46%, 35.46) ; }
	43.75% { transform: translate(30%, 15.56%) }
	50% {   transform: translate(0, 50%) ; }
	62.5% { transform: translate(-35.46, 35.46%) ; }
	75% {   transform: translate(-50%, 0) ; }
	87.5% { transform: translate(-35.46%, -35.46%) ; }
	100% {  transform: translate(0, -50%) ; }
	
}
</style>

Hints:

If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
Remove the HTML style tag as needed.
Change values in the code such as animation-duration as needed.

Animation effects source code licenced under MIT Licence

CSS Spinner Erratic animation effect

CSS Spinner Erratic animation

Welcome to animania.info CSS animation & effects reference