noeminek

/* --------------------------
  Alapok
--------------------------- */

body {
  padding-top: 60px;
	background: #0f4e7a;
}

svg {
	margin: auto;
  display: block;
	width: 28%;
}

/* --------------------------
  Kulcskockák
--------------------------- */

 @keyframes startsUp {
	0% {
		transform: translateY(180px);
	}

	50% {

		transform: translateY(-10px);
	}

	80% {
		transform: translateY(10px);

	}

	100% {
		transform: translateY(0px);
	}
	
}


 @keyframes startsGrow {
	0% {
		transform: rotate(0deg) scale(1);
	}


	50% {
		transform: rotate(-5deg) scale(1.15);
		color: #fdf097;
		opacity: 1;
		fill: #fdf097;
	}
	
	100% {
		transform: rotate(0deg) scale(1);

	}
	
}

/* --------------------------
  SVG stílusok
--------------------------- */

svg .stars{
	stroke-opacity: 0;
}

svg .star{

	transform: translateY(180px) scale(1);

	animation: startsUp 0.5s linear, startsGrow 0.3s ease-out;
	animation-fill-mode: forwards;
}


svg .star:nth-of-type(2) {
	animation-delay: 0.5s, 1.9s;
}
svg .star:nth-of-type(1) {
	animation-delay: 0.8s, 2.2s;

}
svg .star:nth-of-type(3) {
	animation-delay: 1.1s, 2.5s;

}