アニメーションcssのフェードインについて

CSSを使用してアニメーションを作成する方法は多くありますが、以下にいくつかの基本的なスタイルと例題を示します。アニメーションは、要素の状態やプロパティを時間とともに変化させることができます。以下の例では、要素がフェードインする単純なアニメーションを作成します。

↑にマウスをあわせると色が徐々に変わります。

HTML / アニメーションcss

<div class="animated-element"></div>

CSS / アニメーションcss

/* ベースのスタイル */
.animated-element {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    opacity: 0; /* 初期状態では非表示 */
    transition: opacity 1s ease-in-out; /* アニメーションのプロパティと時間を設定 */
}

/* マウスが要素にホバーしたときのスタイル */
.animated-element:hover {
    opacity: 1; /* ホバー時に要素を表示 */
}