エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

【DAY10】マウスホバー時の動きを付ける(transition,transform)【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY10課題】マウスホバー時の動きを付ける

DAY10の課題は「マウスホバー時の動きを付ける」です。

 

transitionとtransformについて

私同様に英語が苦手で、迷う人のために、transitionとtransformの覚え方を簡単に書きました。

覚え方は「 trans+~~」

英語の接頭辞「trans」は「向こう側へ」とか「変換」という意味ですね。

この後に付いた言葉によって単語が作られていますね

  • 【Transition】→ it「行く」-ion「こと、もの」 →推移、遷移
  • 【Transform】→ form「形」 →変形する

受験勉強の英語みたいですが、こうやって覚えると忘れづらいですw

 

transitionとtransformの整理

transitionとtransformの理解については、はにわまんさんの記事を見ればOKだと思います。

個人的に間違えそうなのが「transition=動的hover側に書く」と思ってしまうこと

  • transition:動的 / 動かし方 / 通常クラスに書く
  • transform:静的 / 変形のやり方 / hover側に書く

やっているうちに慣れるはず…

 

transitionとは何か?CSSアニメーションについて

そもそもtransitionとは何か?

「CSSアニメーション」という機能の1つのようです。

CSSアニメーションは、JavaScriptを使わずに、アニメーション(動き)を実装できるので「手軽」&「システム負荷が少ない」なのが特徴です。

 

ちなみにCSSアニメーションは2つしか無くて

  • Transition→簡単な動きを作れる!
  • Animation→複雑な動きも作れる!

という感じです。

とりあえずTransition覚えておけば良さそうですね。

※transitionで設定できないような細かなアニメーションを設定したいなら「Animation」を使えばいいということですね

developer.mozilla.org

 

このスライドが分かりやすかったです。

www.slideshare.net

 

transitionのトリガー

今回使ったのは「:hover」だけでしたが、transitionのトリガー(変化のキッカケ)は他にもあります。

  • :hover → マウスオン
  • :active → リンクをクリック中
  • :target → ページ内リンク
  • :focus → フォーカス時(inputなど)
  • :checked → チェック時(CheckBox, RadioButtonなど)

 

こちらも「こういう部分も変更できるんだ」と知っておくと、いつか役に立つかもなあ、という程度です。

 

とにかく、はにわまんさんの記事が非常に分かりやすくて感動しました↓

 

www.engineer-step.com