コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
ボタンに滑らかなアニメーションを定める
このレッスンでは transitionプロパティを使って ボタンになめらかなアニメーションを 加えてみたいと思います。 今このボタンなんですけれども 普通の状態ですね。 ポインタを重ねますと、 hover の擬似クラスで こういうスタイルになります。 またクリックした時は active の擬似クラスで こんなスタイルになります。 ただし、この切り替わりは パッと切り替わりますよね。 これを transition のプロパティを使えば 徐々にアニメーションで切り替わると いうふうに設定はできますので、 その設定を加えてみましょう。 このHTMLドキュメントで、ボタンは p要素 class、button の中の a要素ということになっています。 そのスタイルは ちょっと切れてしまいましたけども ここですね。 class、button の中のa要素に対して 基本的な設定が加えてあります。 あとマウスポインタ重なった時の 疑似クラス、hover。 クリックした時の疑似クラス、active が それぞれ定められていますけれども 全体にアニメーションさせたいので この大本ですね。 .button a と。 ここにトランジションを加えます。 transition で プロパティ全部に設定を加えたいので all ということで、 時間はちょっと長いですけれども 確認がしやすいように2秒ということで 2s としてみましょう。 これでまず基本的な動きを確認します。 ファイルを保存します。 ではマウスポインタを重ねます。 2秒かけて hover。 クリックすると、2秒かけて active。 離すとまた2秒かけて hover に戻り、 外に出すと2秒かけて元の状態に戻ると。 こんな動きですね。 そしてタイミング関数、 あるいは時間関数と言いますけれども 変化の仕方ですが、 これはデフォルトでは ease が 設定されていますので 始めにちょっと加速しながら 最後にちょっと減速すると いう感じになっています。 こういう細かいアニメーションで ちょっと分かりづらいかもしれません。 でも一応タイミング関数変えてみましょう。 ここで ease-in-out。 始めに加速し、終わりで減速する ease と基本的な形は同じなんですけれども 少しメリハリができます。 分かりますかね。 保存しましょう。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。