@keyframes bookanim {
	0% { 
		opacity: 0;
		transform: scale(0.1) rotate(-100deg);
	}
	50% {
		opacity: 1;
		transform: scale(1.3) rotate(-50deg);
	}
	100% {
		opacity: 1;
	  transform: scale(1.0) rotate(0deg);
	}
}

@keyframes shadowanim {
	0% { 
		opacity: 0;
		transform: scale(0.1) rotate(-100deg);
	}
	50% {
		opacity: 0.7;
		transform: scale(1.0) rotate(0deg);
	}
	99% {
		opacity: 0;
	  transform: scale(2.7) rotate(0deg);
	}
	100% {
		visibility:0;
	}
}

.star {
   position: absolute;
	display: block;
	top:10%;
	width: 60px;
	opacity: 0;
}

.starshadow {
   position: absolute;
	display: block;
	top:10%;
	width: 60px;
	opacity: 0;
}

.star.in-view {
	animation-name: bookanim;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	opacity:0;
}
.starshadow.in-view {
	animation-name: shadowanim;
	animation-duration: 1.0s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	opacity:0;
}

.star1.in-view {
	animation-delay: 0s;
}
.star2.in-view {
	animation-delay: 0.15s;
}
.star3.in-view {
	animation-delay: 0.3s;
}
.star4.in-view {
	animation-delay: 0.45s;
}
.star5.in-view {
	animation-delay: 0.6s;
}