.body
{
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.example_panel
{
	width: 200px;
	height: 200px;
	border-radius: 10px;
	background-color: white;
	color: #222;
	margin: 40px;
	font-size: 15px;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: Poppins;
	font-weight: bold;
	animation-iteration-count: infinite;
}

.example_panel.rotation
{
	animation-name: rotation;
	animation-duration: 5s;
	animation-timing-function: linear;
}

.example_panel.rotation.fast
{
	animation-duration: 0.5s;
}

.example_panel.rotation.bounce
{
	animation-duration: 1.5s;
	animation-timing-function: bounce-out;
}

.example_panel.rotation-fill-mode
{
	animation-name: rotationShort;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

@keyframes rotation
{
	0%
	{
		transform: rotate( 0deg );
	}

	100%
	{
		transform: rotate( 360deg );
	}
}

@keyframes rotationShort
{
	0%
	{
		transform: rotate( 90deg );
	}

	100%
	{
		transform: rotate( 180deg );
	}
}

.example_panel.scale
{
	animation-name: scale;
	animation-duration: 1s;
	animation-timing-function: ease-out;
}

@keyframes scale
{
	0%
	{
		transform: scale( 0.5 );
		background-color: white;
		color: black;
	}

	50%
	{
		transform: scale( 1.1 );
		background-color: #0094ff;
		color: white;
	}

	100%
	{
		background-color: white;
		transform: scale( 0.5 );
		color: black;
	}
}


.example_panel.rainbow
{
	animation-name: rainbow;
	animation-duration: 2s;
	animation-timing-function: linear;
}

@keyframes rainbow
{
	0%
	{
		background-color: red;
	}

	20%
	{
		background-color: yellow;
	}

	40%
	{
		background-color: deeppink;
	}

	60%
	{
		background-color: lawngreen;
	}

	80%
	{
		background-color: purple;
	}

	100%
	{
		background-color: red;
	}
}

.onhover:not( :hover )
{
	animation-name: none;
}