JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<div class="star sample1"></div>
<svg class="star sample2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="100px" height="100px"><path fill="rgb(0, 102, 255)" d="M15.999,22.77l-8.884,6.454l3.396-10.44l-8.882-6.454l10.979,0.002l2.918-8.977l0.476-1.458l3.39,10.433h10.982l-8.886,6.454l3.397,10.443L15.999,22.77L15.999,22.77z"/></svg>

CSS

@-webkit-keyframes rotate{
	from{
		-webkit-transform:rotate(0);
	}
	to{
		-webkit-transform:rotate(360deg);
	}
}
@-webkit-keyframes scale{
	0%{
		-webkit-transform:scale(1);
	}
	50%{
		-webkit-transform:scale(2);
	}
	100%{
		-webkit-transform:scale(1);
	}
}
@keyframes rotate{
	from{
		transform:rotate(0);
	}
	to{
		transform:rotate(360deg);
	}
}
@keyframes scale{
	0%{
		transform:scale(1);
	}
	50%{
		transform:scale(2);
	}
	100%{
		transform:scale(1);
	}
}
.star{
	-webkit-animation-name:rotate;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
	animation-name:rotate;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}
.star.sample1{
	display:inline-block;
	width:100px;
	height:100px;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='100px' height='100px'><path fill='rgb(0, 102, 255)' d='M15.999,22.77l-8.884,6.454l3.396-10.44l-8.882-6.454l10.979,0.002l2.918-8.977l0.476-1.458l3.39,10.433h10.982l-8.886,6.454l3.397,10.443L15.999,22.77L15.999,22.77z'/></svg>");
	background-repeat:no-repeat;
}
.star.sample1:hover{
	-webkit-animation-duration:10s;
	animation-duration:10s;
}
.star.sample2:hover{
	-webkit-animation-name:scale;
	-webkit-animation-duration:2s;
	animation-name:scale;
	animation-duration:2s;
}