*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	position: relative;
}

.container{
	padding: 20px;
	width: 90%;
	height: 50vh;
	margin: 30px auto;
	position: relative;
	
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
	justify-content: center;
	align-items: center;
}

	.cora{
		position: relative;
		width: 100px;
		height: 100px;
		background-color: red;
		transform: rotate(135deg);
		margin-top: 75px;
		
		animation-name: animation-cora;
		animation-duration: 1.1s;
		animation-delay: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-direction: alternate;
	}.cora::after, .cora::before{
		content: '';
		right: 0; top: 50px;
		position: absolute;
		width: 100px;
		height: 100px;
		background-color: red;
		border-radius: 50%;
	}.cora::before{
		top: 0;
		right: 50px;
	}
	
	.circle{
		position: absolute;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: red;
		z-index: 1;
		margin: 10px;
		
		animation-duration: 2s;		
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}
	
		.circle-3{
			right: 0; bottom: 0;
			animation-name: animation-circle-0;
			animation-delay: 0.5s;
		}.circle-2{
			bottom: 0; left: 0;
			animation-name: animation-circle-1;
			animation-delay: 0.6s;
		}.circle-1{
			right: 0; top: 0;
			animation-name: animation-circle-2;
			animation-delay: 0.7s;
		}.circle-0{
			left: 0; top: 0;
			animation-name: animation-circle-3;
			animation-delay: 0.8s;
		}
		
@keyframes animation-circle-0{
	0%{transform: scale(0); opacity: 0;}
	25%{transform: scale(1); opacity: 1;}
	50%{transform: scale(1.1); opacity: 0.7;}
	75%{transform: scale(1.2); opacity: 0.4;}
	100%{transform: scale(1.3); opacity: 0;}
}

@keyframes animation-circle-1{
	0%{transform: scale(0); opacity: 0;}
	25%{transform: scale(1); opacity: 1;}
	50%{transform: scale(1.1); opacity: 0.7;}
	75%{transform: scale(1.2); opacity: 0.4;}
	100%{transform: scale(1.3); opacity: 0;}
}

@keyframes animation-circle-2{
	0%{transform: scale(0); opacity: 0;}
	25%{transform: scale(1); opacity: 1;}
	50%{transform: scale(1.1); opacity: 0.7;}
	75%{transform: scale(1.2); opacity: 0.4;}
	100%{transform: scale(1.3); opacity: 0;}
}

@keyframes animation-circle-3{
	0%{transform: scale(0); opacity: 0;}
	25%{transform: scale(1); opacity: 1;}
	50%{transform: scale(1.1); opacity: 0.7;}
	75%{transform: scale(1.2); opacity: 0.4;}
	100%{transform: scale(1.3); opacity: 0;}
}

@keyframes animation-cora{
	from{
		transform: scale(1) rotate(135deg);
	}
	to{
		transform: scale(1.6) rotate(135deg);
	}
}