.css_fade_in li {
    opacity: 0;
}
.css_fade_in.move li {
    animation: css_fade_in 1s ease forwards;
    //forwards 終了時、最後のキーフレームのスタイルを保持
    //infinite ループ
    //forwards 終了時、最後のキーフレームのスタイルを保持
    //ease インとアウトをなめらかに（初期値）
    //linear：一定
    //ease-in：ゆっくりイン
    //ease-out：ゆっくりアウト
    //ease-in-out：ゆっくりインしてゆっくりアウト
    animation-delay: 0.5s;
}
@keyframes css_fade_in {
0% {
}
100% {
    opacity: 1;
}
}

.trans_fade_in li {
    opacity: 0;
    transition: opacity 1s;
    transition-delay: 0.5s;
}
.trans_fade_in.move li {
    opacity: 1;
}

.css_fade_x li {
    opacity: 0;
}
.css_fade_x.move li {
    animation: css_fade_x 1s forwards;
}
@keyframes css_fade_x {
0% {
    opacity: 0;
    transform: translateX(60px);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}

.trans_fade_x li {
    opacity: 0;
    transition: opacity 1s, transform 1s;
    transform: translateX(60px);
}
.trans_fade_x.move li {
    opacity: 1;
    transform: translateX(0px);
}

.css_fade_jyun li {
    opacity: 0;
}
.css_fade_jyun.move li {
    animation: css_fade_jyun 1s forwards;
}
.css_fade_jyun.move li:nth-child(1) {
    animation-delay: 0.2s;
}
.css_fade_jyun.move li:nth-child(2) {
    animation-delay: 0.4s;
}
.css_fade_jyun.move li:nth-child(3) {
    animation-delay: 0.6s;
}
.css_fade_jyun.move li:nth-child(4) {
    animation-delay: 0.8s;
}
@keyframes css_fade_jyun {
0% {
    opacity: 0;
    transform: translateY(40px);
}
100% {
    opacity: 1;
    transform: translateY(0px);
}
}

.trans_fade_jyun li {
    opacity: 0;
    transition: opacity 1s, transform 1s;
    transform: translateY(40px);
}
.trans_fade_jyun.move li {
    opacity: 1;
    transform: translateY(0px);
}
.trans_fade_jyun.move li:nth-child(1) {
    transition-delay: 0.2s;
}
.trans_fade_jyun.move li:nth-child(2) {
    transition-delay: 0.4s;
}
.trans_fade_jyun.move li:nth-child(3) {
    transition-delay: 0.6s;
}
.trans_fade_jyun.move li:nth-child(4) {
    transition-delay: 0.8s;
}

    transition: background-color 2s ease-out　0.5s;

    transitionプロパティの値の指定は、
    ①transitionするプロパティ(transition-property) 
    ②変化の時間(transition-duration)
    ③イージング(transition-timing-function) 
    ④変化が始まる時間(transition-delay) 
    の順で指定する必要があります。各値は半角スペースで区切ります。
	
    ③イージングについては、
    ease（開始と終了が滑らか、初期値）
    linear（一定）
    ease-in（ゆっくり始まる）
    ease-out（ゆっくり終わる）
    ease-in-out（ゆっくり始まってゆっくり終わる）
    の指定が可能です。
	
    ●sample
    transition: width 1s ease-out;
    transition: border-color 0.3s, color 0.3s, background-color 0.3s, opacity 0.3s;
    transition: background-color 1s linear 0 , width 1s linear 0 , height 1s linear 0;
	
a {
    transition: opacity 0.3s;
}
a:hover {
    opacity: 0.8;
}

これにより、opacity のみに transition をかけることができる。