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

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

とうとう10日続けることができました。
今日は無理かもな～みたいな日も頑張れたので、自分をほめようと思います。
あとは時間を作らせてくれている家族に感謝です。

さて、今日はホバーすると色と文字内容が変わるアニメーションです。
そろそろココナラで出店したくて、以前お仕事でWordpressで作ったWEBサイトを架空サイトとしてSTUDIOで作っています。また別の雰囲気になったので、ちょっと完成が楽しみです。
その中でちょうどホバーのアニメーションを設定したのでご紹介します。

ホバーすると色と文字内容が変わるアニメーション

レイヤー構造と設定

まずはレイヤー構造と設定です。
１つのボックスの中に①と②のボックスを作ります。
①は表示したいボタンのレイアウトで大丈夫です。そして②はホバー時に出したいレイアウトを作ってください。
特に気を付ける設定は赤丸の部分です！横幅を「0px」、不透明度を「0」にします。そして今回の場合は上から被せることになるので、配置を「絶対位置」、重ね順を「１」に設定します。

アニメーションの設定

あとは②のボックスを横幅「100％」、不透明度「１」にすると、色も変わり、文字も変わるアニメーションになります。

今日は正直投稿するのが厳しいな～と思ってたので、なんとか投稿できてよかったです。
ではまた明日、よろしくお願いします！