CSSでフェードインする方法

Question

CSSでfade-inする方法を調べると@keyframesというのが出てきて簡単にできそうだと思ったのですが動きませんでした。何が問題でしょうか？
因みにreactを使ってCSSをimportしています。

@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
} 

:local .text1 {

    animation-name: fadeIn;
    animation-duration: 10s;
    
}

render() {
		return (
 <h3 className={style.text1}>test</h3>
)
}

関係ないところは省略していますが、以上の様な形です。起動と同時にフェードインするアニメーションは@keyframesを使う以外にもあるでしょうか？もしあればやり方は問わないのですが、@keyframesを使った方法が理解しやすそうだったのでできればこれを利用したいです。

Answer 1

初期状態で要素をopacityで透明度を0にしておく、class付与で0.3秒かけて透明度を1に戻す方法が最も簡単な方法になります。
クラスを付与するタイミングはjavascriptで任意のタイミングで付与ください。

.hoge {
  opacity: 0;
  transition: .3s;
}

.hoge.is-active {
  opacity: 1;
}

Comments

[Hayato1201]

回答ありがとうございます！
クラスを付与するというのがよくわからないのですが、現在 <h3 className={style.hoge}>test</h3>の様にしていてます。どの様にすれば付与できるのでしょうか？