/*
  Skin Name: ふわっと追加
  Description: 好きなスキンにふわっと動き（フェイドイン）を追加します。
  Skin URI: https://lucklog.info/cocoon-raku-fadein/
  Author: らく
  Author URI: https://lucklog.info/
  Screenshot URI: https://im-cocoon.net/wp-content/uploads/raku-add-fadein.gif
  Version: 1.1.4
  Priority: 10001000000
*/
/*以下にスタイルシートを記入してください*/

#header-container,
#main,
#main > *,
#main .article > *,
#sidebar {
	-webkit-animation-duration: 1.3s;
	animation-duration: 1.3s;
	-webkit-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
	visibility: hidden;
}

.raku_fadein_type4 #header-container {
	animation-delay: 1.1s;
	-webkit-animation-delay: 1.1s;
}

#main {
	animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;
}

#main > *,
#main .article > * {
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
}

#sidebar {
	animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;
}

.raku_fadeIn,
.raku_fadeInDown,
.raku_fadeInLeft,
.raku_fadeInRight,
.raku_fadeInUp {
	visibility: visible !important;
}

/* raku_fadeIn */
.raku_fadeIn {
	animation-name: raku_fadeIn;
}

/* raku_fadeInDown */
.raku_fadeInDown {
	animation-name: raku_fadeInDown;
}

/* raku_fadeInLeft */
.raku_fadeInLeft {
	animation-name: raku_fadeInLeft;
}

/* raku_fadeInRight */
.raku_fadeInRight {
	animation-name: raku_fadeInRight;
}

/* raku_fadeInUp */
.raku_fadeInUp {
	animation-name: raku_fadeInUp;
}

@keyframes raku_fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes raku_fadeInDown {
	from {
		opacity: 0;
		position: relative;
		top: -100px;
	}

	to {
		opacity: 1;
		position: relative;
		top: 0;
	}
}

@keyframes raku_fadeInLeft {
	from {
		opacity: 0;
		position: relative;
		left: -200px;
	}

	to {
		opacity: 1;
		position: relative;
		left: 0;
	}
}

@keyframes raku_fadeInRight {
	from {
		opacity: 0;
		position: relative;
		right: -200px;
	}

	to {
		opacity: 1;
		position: relative;
		right: 0;
	}
}

@keyframes raku_fadeInUp {
	from {
		opacity: 0;
		position: relative;
		top: 100px;
	}

	to {
		opacity: 1;
		position: relative;
		top: 0;
	}
}
