ホバーで変化するテキストの作り方｜CSS

ユーザーアクションで表示を切り替えるのってよく見ますよね。
今回は、パソコンでマウスカーソルを持ってくと、文字を「ふわっ」と変化させるテクニックのご紹介です。

文字がふわっと変化する

CSSだけで要素を変化させる時は、「:hover」を使います。
元の要素にあらかじめCSSを設定しておきます。
大事なのは、元の要素に「transition」を入れることです。
この「transition」は変化に関わること全部の設定ができます。
まず、変化させる時間は、「s」や「ms」という単位を使います。

・1s = 1秒
・1ms = 0.001秒
・10ms = 0.01秒
・100ms = 0.1秒
・1000ms = 1秒

自分は、いつも「s」を使いますので今回も「s」を使って書きます。
「transition」には、変化時間の他にイイ感じの動きも設定できます。
その動きを「easing(イージング)」と言って、イイジングだけにイイ感じの動きになるんですよ。

……….

すみません。言いたいだけになってしまいました。
話を戻しますね。
「easing(イージング)」には、色々種類があって、「ブワッ」となる動きや「シュイーン」となる動きや….
全然伝わらないですよね。こちらのeasing見本サイトを見ると動きが分かりやすいです。

「transition」を使う時は、必ずベンダープレフィックスも忘れずについかしてくださいね。
（Android 4.2以下は、ベンダープレフィックスが無いと動かないです）

【HTML】

<div class="henka">
  ここは、カーソルを当てても変化しませんが、
  <span>
    1秒かけてここが変化します！
  </span>
</div>

【CSS】

.henka span {
  font-size: 20px;
  font-weight: 800;
  color:pink;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.henka span:hover {
  color: white;
}

【実行結果】

今回は、文字を変化させるテクニックでした。