CSS遷移の例–ホバーアニメーションの使用方法、不透明度の変更など

CSS、HTML、JavaScriptなどのWebテクノロジーを使用している場合は、CSSアニメーションとトランジションに関する基本的な知識を持っていることが重要です。

この記事では、CSSを使用していくつかの基本的な遷移アニメーションを作成する方法を学習します。

ホバー時に基本的なトランジションを使用して要素をアニメーション化する方法

この例では、ユーザーが要素にカーソルを合わせるかマウスを合わせると、要素の不透明度が変更されます。

      Static Template   .elem { background: blueviolet; width: 300px; height: 150px; } .elem:hover { opacity: 0.5; } 

これは、要素にカーソルを合わせるとトリガーできる単純な遷移です。同時に実行される複数のトランジションを追加できます。

スケール変換プロパティを追加して、要素にスケール遷移を追加しましょう。

 .elem:hover { transform: scale(1.1); }

ただし、遷移の期間を定義したり、タイミング関数を使用したりしていないため、遷移はスムーズではないようです。  

transitionプロパティを追加すると、要素がよりスムーズに移動します。

 .elem { background: blueviolet; width: 300px; height: 150px; margin: 20px auto; transition: 500ms linear; }

遷移プロパティがどのように機能するかを分析してみましょう。

 transition: 500ms linear;
  • 500ms:ミリ秒単位の遷移の期間
  • linear:タイミング機能
div { transition:    ; }

以下のようなオプションをさらに追加できます(MDNの例)。

#delay { transition-property: font-size; transition-duration: 4s; transition-delay: 2s; }

では、このコードは何をしているのでしょうか?

  • transition-property:アニメーション化するプロパティ。それはどのようなCSSの要素とすることができるbackgroundheighttranslateYtranslateX、とのようにします。
  • 遷移期間:遷移の期間
  • 遷移遅延:遷移が開始する前の遅延

transitionCSSでのさまざまな使用法について詳しくは、こちらをご覧ください。

アニメーションプロパティとキーフレームを使用してトランジションをよりインタラクティブにする方法

このアニメーションをより創造的でインタラクティブにするために、CSSトランジションをさらに活用することができます。

キーフレームを使用して要素を移動する方法

要素がポイントAからポイントBに移動する例を見てみましょう。translateXとtranslateYを使用します。

      Static Template   .elem { background: orange; width: 300px; height: 150px; animation: moveToRight 2s ease-in-out; animation-delay: 1000ms; } @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } } 

そして、これは私たちが得るものです:

今回は、アニメーションやキーフレームなどの新しいプロパティを使用しました。animationプロパティを使用してアニメーションの名前と長さを定義し、キーフレームを使用して要素の移動方法を記述しました。

 animation: moveToRight 2s ease-in-out;

ここでアニメーションに名前を付けましたが、moveToRight好きな名前を使用できます。期間は2s、でease-in-outあり、タイミング関数です。

、のようease-inに使用できる他のタイミング関数がありlinearease-out基本的にアニメーションがスムーズになります。タイミング機能について詳しくは、こちらをご覧ください。

@keyframesアニメーションの名前を取ります。この場合はmoveToRightです。

 @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }

keyframes複数のステップでアニメーションを実行します。上記の例では、パーセンテージを使用して、遷移の範囲または順序を表します。fromandtoメソッドを使用することもできます。以下のように」

 @keyframes moveToRight { from { transform: translateX(0px); } to { transform: translateX(300px); } }

from アニメーションの開始点または最初のステップを表します。

to 実行されるアニメーションの終点または最後のステップです。

場合によっては、パーセンテージを使用することをお勧めします。たとえば、次のように、シーケンスで実行される3つ以上のトランジションを追加するとします。

 @keyframes moveToRight { 0% { transform: translateX(0px); } 50% { transform: translateX(150px); } 100% { transform: translateX(300px); } }

We can be more creative and animate many properties at the same time like in the following example:

You can play around with properties and animation techniques in the sandbox here:

They are plenty more things we can do with keyframes. First, let's add more transitions to our animation.

How to animate more properties and include them in the transition

This time we will animate the background, and we will make the element move in a square pattern. We'll make the animation run forever using the infinite property as a timing function.

      Static Template   .elem { background: orange; width: 250px; height: 250px; border-radius: 10px; animation: moveToLeft 5s linear infinite; animation-delay: 1000ms; } @keyframes moveToLeft { 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); } 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } 50% { transform: translateY(200px) translateX(400px); background: linear-gradient(to top, #30cfd0 0%, #330867 100%); } 75% { transform: translateX(0px) translateY(200px); background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } 100% { transform: translateY(0px); } } 

Let's break it down. First we add infinite to make the animation run forever.

animation: moveToLeft 5s linear infinite;

And then we split the animation into four steps. At each step, we'll run a different transition and all the animation will run in a sequence.

  • First step: set the element horizontally to translateX(0px), and change the background to the gradient.
 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); }
  • The second animation will move the element from the left to the right and change the background color.
 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
  • The third animation will move the element down using translateY and change the background color again.
  • In the fourth step, the element will move back to the left and change the background color.
  • In the fifth animation the element should go back to its original place.

Wrapping up

In this article, we covered various things you can do with CSS transitions. You can use CSS transitions in many ways in your applications to create a better user experience.

CSSアニメーションの基本を学んだ後、ユーザーの操作を必要とするより複雑なものを超えて作成したい場合があります。このために、JavaScriptまたはサードパーティのアニメーションライブラリを使用できます。

こんにちは。私の名前はSaidHayaniです。ニュースレターを通じて視聴者を増やすために、クリエイター、ブロガー、インフルエンサーを支援するためにsubscribi.ioを作成しました。