JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="animated rotateInDownLeft"></div>

CSS

.animated{animation-name: bounce;
  animation-duration: 0.5s;
  animation-iteration-count: 10;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  animation-fill-mode: both;}

.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}

@-webkit-keyframes rotateInDownLeft {
	0% {
		-webkit-transform-origin: left bottom;
		-webkit-transform: rotate(5deg);
		
	}
	
	100% {
		-webkit-transform-origin: left bottom;
		-webkit-transform: rotate(-20deg);
		
	}
}

@-moz-keyframes rotateInDownLeft {
	0% {
		-moz-transform-origin: left bottom;
		-moz-transform: rotate(5deg);
		
	}
	
	100% {
		-moz-transform-origin: left bottom;
		-moz-transform: rotate(-20deg);
		
	}
}

@-o-keyframes rotateInDownLeft {
	0% {
		-o-transform-origin: left bottom;
		-o-transform: rotate(5deg);
		
	}
	
	100% {
		-o-transform-origin: left bottom;
		-o-transform: rotate(-20deg);
		
	}
}

@keyframes rotateInDownLeft {
	0% {
		transform-origin: left bottom;
		transform: rotate(5deg);
		
	}
	
	100% {
		transform-origin: left bottom;
		transform: rotate(-20deg);
		
	}
}

body:hover .rotateInDownLeft {
	-webkit-animation-name: rotateInDownLeft;
	-moz-animation-name: rotateInDownLeft;
	-o-animation-name: rotateInDownLeft;
	animation-name: rotateInDownLeft;
}
body {padding:50px;}
div {width: 100px; padding:20px; background:red; transform-origin: left bottom; transform: rotate(5deg);}