/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/
@keyframes sideSlide {
	60% {
		transform: translate(0px, 5px) scale(1);
		color: #f00;
		filter: blur(2px);
		animation-timing-function: ease-in;
	}

	80% {
		transform: translate(0px, 5px) scale(1);
		color: #f00;
		filter: none;
	}

	99% {
		transform: translate(0) scale(1.5);
		color: #fff;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
		color: #ffd900;
		filter:
			drop-shadow(2px 2px 1px rgba(0, 0, 0, 1))
		;
	}
}

@keyframes rotate {
	0% {
		transform: scale(2) rotate(179deg);
		opacity: 0;
		filter: blur(10px);
		animation-timing-function: ease-in;
	}

	15% {
		transform: scale(1) rotate(0deg);
		opacity: 0.5;
		filter: none;
	}

	16% {
		background-image: url('../../uploads/2022/04/sss-logo-w0.png');
		opacity: 1;
		filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 1));
		animation-timing-function: ease-out;
	}

	20% {
		background-image: url('../../uploads/2022/04/sss-logo-a2b.png');
		animation-timing-function: ease-in;
	}
	
	25% {
		background-image: url('../../uploads/2022/04/sss-logo-a2b.png');
		animation-timing-function: ease-out;
	}
	
	40% {
		background-image: url('../../uploads/2022/04/sss-logo-w3-1.png');
		filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0));
		animation-timing-function: ease-out;
	}
	
	60% {
		background-image: url('../../uploads/2022/04/sss-logo-a3b.png');
		animation-timing-function: ease-in;
	}
	
	70% {
		background-image: url('../../uploads/2022/04/sss-logo-a3b.png');
		animation-timing-function: ease-out;
	}
	
	85% {
		background-image: url('../../uploads/2022/04/sss-logo-w1-1.png');
		animation-timing-function: ease-in;
	}
	
	100% {
		background-image: url('../../uploads/2022/04/sss-logo-w0.png');
		animation-timing-function: ease-in;
	}
}