フェードインのopacityとホバーのopacityの時間について

Question

現状スクロールしたらふわっと表示させるアニメーションがあり、
その中で横並びにしている要素は、transition-durationで0.2sずつ
ずれて出るようにしています。

最初はopacity:0で、スクロールのタイミングでopacity:1になるクラスをつけることで
ふわっとフェードインさせる動きをさせています。

その影響か、hoverにかけてるopacityにもフェードインのdurationがかかってしまい
遅くopacityがかかるようになってしまいました。

hoverのアニメーションは遅くしたくないのですが、改善方法を教えていただきたいです。
初歩的な質問ですが、よろしくお願いいたします。

<ul class="sample-list fadeIn">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

.sample-list {
 display: flex;
 justify-content: center;
}

.sample-list {
 transition; hover 0.3s
}

.sample-list:hover {
 opacity: 0.5;
}

.sample-list:nth-child(1){
transition-duration: opacity 0.2s 
}
/* 割愛 li要素を0.2sずつ遅くした記述をしてます。 */


/* フェードインアニメーション */
.fadeIn {
 opacity: 0;
 transform: translateY(-30px);
}

.fadeIn.js-fadein {　/* Jsでスクロールでクラスがつくようにしています。  */
 opacity: 1;
 transform: translateY(0);
 transition: opacity 0.5s, transform 0.5s;

Comments

[hatena19]

だれでも動作確認できるように、
CSSを省略せずに、JSのコードも追記してください。

そもそも下記のコードは構文エラーだし。
transition; hover 0.3s

Answer 1

ご提示のコードの範囲ですと .sample-list に background がないようなので、

/* .sample-list:hover { */
.sample-list:hover li{
 opacity: 0.5;
}

のように子要素にスタイルを効かせればいいのではないかな、と思いました。