CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで最初から最後まで一定速度のアニメーションを設定する方法

CSSでアニメーションを作成すると、デフォルトでは開始時に加速し、終了時に減速する「イージング」が自動的に適用されます。しかし、ローディングスピナーやプログレスバーのように、最初から最後までまったく同じ速度で動かしたいケースもあります。

そのような場合に活用するのが、animation-timing-functionプロパティです。このプロパティにlinear（リニア）という値を指定すると、アニメーション全体を通じて一定の速度が保たれます。

animation-timing-function: linear とは

linearは、アニメーションの進行速度を一定に保つための値です。加速も減速もなく、開始から終了まで均等なペースで変化が続きます。規則的で機械的な動きが必要な場面に特に適しています。

コード例

以下は、黄色いボックスを一定速度で左右に移動させるアニメーションの例です。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px;
  height: 200px;
  position: relative;
  background-color: yellow;
  animation-name: myanim;
  animation-duration: 2s;
  animation-direction: alternate-reverse;
  animation-iteration-count: 3;
}
@keyframes myanim {
  from {left: 100px;}
  to {left: 200px;}
}
#demo {animation-timing-function: linear;}
</style>
</head>
<body>
<div id="demo">linear effect</div>
</body>
</html>

コードの解説

  • @keyframes myanim：leftプロパティを100pxから200pxまで変化させるキーフレームを定義しています。
  • animation-duration: 2s：アニメーション1回あたりの所要時間を2秒に設定しています。
  • animation-direction: alternate-reverse：逆方向から再生し、往復する動きを作り出します。
  • animation-iteration-count: 3：アニメーションを3回繰り返します。
  • animation-timing-function: linear：IDセレクター#demoに対して指定することで、この要素だけ一定速度のアニメーションになります。

まとめ

アニメーションを一定速度で再生したい場合は、animation-timing-functionプロパティにlinearを指定しましょう。デフォルトの「ease」のような緩急のある動きではなく、滑らかで均一な動きを実現できます。

  1. CSSでホバー効果の速度を設定する方法｜transition-durationの使い方を解説

    CSSでホバー（マウスオーバー）時のアニメーション速度を設定するには、transition-duration プロパティを使用します。ホバー時のスタイル変更は :hover セレクターで指定します。transition-durationと:hoverセレクターの役割transition-durationプロパティは、要素のスタイルが変化する際にかかる時間を秒（s）またはミリ秒（ms）単位で指定できます。例えば「2s」と設定すれば、色や枠線などの変化が2秒かけて滑らかに遷移します。このプロパティを元の要素側に記述し、変化後のスタイルを :hover セレクターで定義することで、自然なホバーアニメ

  2. CSSのlinear-gradient()関数で背景に線形グラデーションを設定する方法

    CSSでは、linear-gradient()関数を使うことで、背景画像として線形グラデーションを簡単に設定できます。この関数はbackgroundプロパティやbackground-imageプロパティの値として指定し、複数の色をカンマで区切って渡すことで、それらが滑らかにつながったグラデーションが生成されます。 linear-gradient()関数の基本構文 background: linear-gradient(色1, 色2, 色3, ...); 色は2つ以上指定でき、上から下へ順番に表示されます。グラデーションの方向（角度）を指定することも可能です。例えばlinear-gradient