<ul class="fade_up">
<li>class要素自体（親要素）に適用</li>
<li>class要素自体（親要素）に適用</li>
<li>class要素自体（親要素）に適用</li>
<li>class要素自体（親要素）に適用</li>
</ul>

<ul class="fade_up_jyun">
<li>子要素（liやdiv）にeffect適用</li>
<li>子要素（liやdiv）にeffect適用</li>
<li>子要素（liやdiv）にeffect適用</li>
<li>子要素（liやdiv）にeffect適用</li>
</ul>

<ul class="fade_in">
<li>class要素自体（親要素）に適用</li>
<li>class要素自体（親要素）に適用</li>
<li>class要素自体（親要素）に適用</li>
<li>class要素自体（親要素）に適用</li>
</ul>

/***************************************************************************
fade_up
****************************************************************************/

.fade_up {
    opacity: 0;
    transition: opacity 0.9s, transform 0.9s;
    transform: translateY(40px);
}
.effect_fade_up {
    opacity: 1;
    transform: translateY(0%);
}

/***************************************************************************
fade_up_jyun
****************************************************************************/

.fade_up_jyun > div,.fade_up_jyun > li {
    opacity: 0;
    transition: opacity 0.9s, transform 0.9s;
    transform: translateY(40px);
}
.effect_fade_up_jyun > div,.effect_fade_up_jyun > li {
    opacity: 1;
    transform: translateY(0px);
}
.effect_fade_up_jyun > div:nth-child(2),.effect_fade_up_jyun > li:nth-child(2) {
    transition-delay: 0.3s;
}
.effect_fade_up_jyun > div:nth-child(3),.effect_fade_up_jyun > li:nth-child(3) {
    transition-delay: 0.6s;
}
.effect_fade_up_jyun > div:nth-child(4),.effect_fade_up_jyun > li:nth-child(4) {
    transition-delay: 0.9s;
}

/***************************************************************************
fade_in
****************************************************************************/

.fade_in {
    opacity: 0;
    transition: opacity 0.9s;
}
.effect_fade_in {
    opacity: 1;
}

/***************************************************************************
fade_x
****************************************************************************/

.fade_x {
    opacity: 0;
    transition: opacity 1s, transform 0.7s;
    transform: translateX(-80px);
}
.effect_fade_x {
    opacity: 1;
    transform: translateX(0%);
}
.fade_x_reverse {
    opacity: 0;
    transition: opacity 1s, transform 0.7s;
    transform: translateX(80px);
}
.effect_fade_x_reverse {
    opacity: 1;
    transform: translateX(0%);
}