アニメーションを極めるための11日目（ホバーすると色と文字内容が変わるアニメーション）

こんにちは。
WEBデザイナーのシュウトウです。

今日も架空サイトから抜粋です。
ヘッダーのアイコン部分がホバーする大きくなるアニメーションです。

ホバーすると大きくなるアニメーション

アニメーションの設定（SNSアイコン）

アイコンのボックスをホバー時にスケールが変わるように設定します。
今回は「1.2」で設計しました。これだけでクリックしたくなるアイコンになりました！
ついでに下のリンクたちはホバーすると色が変わる設定にしています。

アニメーションの設定（文字リンク）

おまけ

こちらも同じようにホバーすると写真が大きくなるように見せています。
スケールはxもyも「1.08」に設定しています。大きくなりすぎると違和感が出る要素は刻んで数値を設定するのも良さそうです。

急にまた簡単なアニメーションになりましたが、こういう少しの動きがWEBサイトのクオリティを上げてくれますよね。
ではまた明日、よろしくお願いします！