2

CSSで線形属性はどういう意味ですか?

 background-position 0.1s linear;

私はこのコードを見ていますが、線形属性に慣れていません。これはボタンのグラデーションをどのように変更しますか?

.btn:hover {
  color: #333333;
  text-decoration: none;
  background-color: #e6e6e6;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -ms-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}
4

1 に答える 1

4

線形という単語は、css トランジションで使用されるイージング機能を表します。これは、正式には「トランジション タイミング関数」として知られています。この場合、 linearは CSS に、この遷移のアニメーション全体でこの要素が同じ速度を維持することを伝えています。

transition-timing-function を指定すると、アニメーション全体の速度を表す曲線グラフが定義されます。

ここで MDN ドキュメントを見てください - 他のオプションのリストを見ることができます

他の興味深いアニメーション効果を得るには、「イーズイン」または「イーズアウト」を試すことができます。これは、ゆっくりと開始してスピードアップするか、すばやく開始してスローダウンするアニメーションを表します。

cubic-bezier(start, mid1, mid2, end)必要に応じて、独自のイージングを定義することもできます。4 つの値は、アニメーションの Start MidPoint1 MidPoint2 と End での速度を表します。

于 2013-05-28T19:22:16.780 に答える