transition と opacity で「ふわっと表示」を作ってみよう | HTML / CSS基礎

前のページでは、

z-index
モーダル
重なり順

を学びました。

今回は、

transition
opacity
transform

を組み合わせて、

「ふわっと表示されるUI」

を作ってみます

現在のWebサイトでは、

急に表示される

よりも、

少しアニメーションする

UIが非常によく使われています。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

opacity とは？

opacity は、

透明度

を変更するCSSです。

opacity の数字

opacity: 1;

は、

完全表示

です。

opacity: 0

opacity: 0;

は、

完全に透明

になります。

実際に試してみよう

<div class="box">
  ボックスです
</div>

.box {
  opacity: 0.5;
}

すると、

半透明

になります。

hover と組み合わせる

例えば、

.button {
  opacity: 0.7;
}

.button:hover {
  opacity: 1;
}

を書くと、

hover時に濃くなる

表現になります。

transition を追加しよう

.button {
  opacity: 0.7;

  transition: 0.3s;
}

を追加すると、

ふわっと変化

します。

transform と組み合わせる

例えば、

.card:hover {
  transform: translateY(-4px);
}

を書くと、

少し浮く

アニメーションになります。

opacity + transform は超定番

現在のWeb制作では、

opacity + transform + transition

の組み合わせが非常によく使われています。

実際にまとめて書いてみよう

.card {
  transition: 0.3s;
}

.card:hover {
  opacity: 0.9;

  transform: translateY(-4px);
}

なぜ transform を使うの？

例えば、

margin-top

などで動かすこともできます。

しかし、

transform のほうが滑らか

に動くことが多いです。

transform はGPUが関係することもある

ブラウザは、

transform や opacity

を、

高速処理しやすい

ことがあります。

そのため、

アニメーション向き

と言われることがあります。

モーダルにも使われる

例えば、

モーダルをふわっと表示

するときも、

opacity
transform
transition

がよく使われます。

モーダル表示例

.modal {
  opacity: 0;

  transform: translateY(16px);

  transition: 0.3s;
}

.modal.show {
  opacity: 1;

  transform: translateY(0);
}

.show が付いたら表示

これは、

最初は透明 + 少し下
show が付いたら表示

というアニメーションです。

translateY(16px)

translateY(16px)

は、

下へ16px移動

です。

translateY(0)

translateY(0)

で元位置へ戻しています。

「少しだけ」が大切

現在のWebデザインでは、

大きく動かす

よりも、

少しだけ動かす

ほうが好まれることが多いです。

ease もよく使う

例えば、

transition: 0.3s ease;

と書くこともあります。

ease とは？

ease は、

最初と最後を自然な速度にする

設定です。

linear との違い

linear

ずっと同じ速度

ease

自然な加速・減速

実際のWeb制作では ease が多い

そのため、

transition: 0.3s ease;

は非常によく見かけます。

最初は hover アニメーションだけでもOK

最初は、

opacity
transform
transition

を使って、

hoverで少し動く

くらいでも十分実践的です

今回学んだこと

今回学んだこと：

opacity
transition
transform
translateY
ease
ふわっと表示

などです。

次のページでは

次のページでは、

cursor
pointer-events
user-select

などを使って、

「ユーザー操作に関するCSS」

を学んでいきます