只今、PHPを学習しております

CSS3 イージング関数【 一覧 】

CSS3で機能するイージング関数 各種

CSS3の transition / animation プロパティにて、使用可能なイージング関数について一覧形式でまとめました。

以下で記述しているコードはanimationプロパティで使用した場合の記述となっているので、お好みで書き換えてください。

名称値で扱える基本的なイージングたち

transition / animation プロパティには名称値で指定できる値が存在しています。lineareaseease-inease-outease-in-out です。

linear

CSS
.linear_box {
  animation: moved 2s linear 0s infinite alternate both;
}


ease

CSS
.ease_box {
  animation: moved 2s ease 0s infinite alternate both;
}


ease-in

CSS
.ease_in_box {
  animation: moved 2s ease-in 0s infinite alternate both;
}


ease-out

CSS
.ease_out_box {
  animation: moved 2s ease-out 0s infinite alternate both;
}


ease-in-out

CSS
.ease_in_out_box {
  animation: moved 2s ease-in-out 0s infinite alternate both;
}


関数値で扱うイージング関数

transition / animation プロパティで指定できるイージング値の中でも関数値で扱うモノたちがあります。

steps(n)

CSS
.steps_box {
  animation: moved 2s steps(5) 0s infinite alternate both;
}


cubic-bezier(n,n,n,n)

CSS
.cubic_bezier_box {
  animation: moved 2s cubic-bezier(0.85, 0, 0.15, 1) 0s infinite alternate both;
}


その他の名称値をcubic-bezier()で再現する

関数値のところでも登場しました、cubic-bezier()を使用することで自由なイージングを描くことができます。その中でも別途、名称値として扱われるその他の値を再現したモノが以下になります。

easeInSine

CSS
.ease_in_sine_box {
  animation: moved 2s cubic-bezier(0.12, 0, 0.39, 0) 0s infinite alternate both;
}


easeOutSine

CSS
.ease_out_sine_box {
  animation: moved 2s cubic-bezier(0.61, 1, 0.88, 1) 0s infinite alternate both;
}


easeInOutSine

CSS
.ease_in_out_sine_box {
  animation: moved 2s cubic-bezier(0.37, 0, 0.63, 1) 0s infinite alternate both;
}


easeInQuad

CSS
.ease_in_quad_box {
  animation: moved 2s cubic-bezier(0.11, 0, 0.5, 0) 0s infinite alternate both;
}


easeOutQuad

CSS
.ease_out_quad_box {
  animation: moved 2s cubic-bezier(0.5, 1, 0.89, 1) 0s infinite alternate both;
}


easeInOutQuad

CSS
.ease_in_out_quad_box {
  animation: moved 2s cubic-bezier(0.45, 0, 0.55, 1) 0s infinite alternate both;
}


easeInCubic

CSS
.ease_in_cubic_box {
  animation: moved 2s cubic-bezier(0.32, 0, 0.67, 0) 0s infinite alternate both;
}


easeOutCubic

CSS
.ease_out_cubic_box {
  animation: moved 2s cubic-bezier(0.33, 1, 0.68, 1) 0s infinite alternate both;
}


easeInOutCubic

CSS
.ease_in_out_cubic_box {
  animation: moved 2s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite alternate both;
}


easeInQuart

CSS
.ease_in_quart_box {
  animation: moved 2s cubic-bezier(0.5, 0, 0.75, 0) 0s infinite alternate both;
}


easeOutQuart

CSS
.ease_out_quart_box {
  animation: moved 2s cubic-bezier(0.25, 1, 0.5, 1) 0s infinite alternate both;
}


easeInOutQuart

CSS
.ease_in_out_quart_box {
  animation: moved 2s cubic-bezier(0.76, 0, 0.24, 1) 0s infinite alternate both;
}


easeInQuint

CSS
.ease_in_quint_box {
  animation: moved 2s cubic-bezier(0.64, 0, 0.78, 0) 0s infinite alternate both;
}


easeOutQuint

CSS
.ease_out_quint_box {
  animation: moved 2s cubic-bezier(0.22, 1, 0.36, 1) 0s infinite alternate both;
}


easeInOutQuint

CSS
.ease_in_out_quint_box {
  animation: moved 2s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite alternate both;
}


easeInExpo

CSS
.ease_in_expo_box {
  animation: moved 2s cubic-bezier(0.7, 0, 0.84, 0) 0s infinite alternate both;
}


easeOutExpo

CSS
.ease_out_expo_box {
  animation: moved 2s cubic-bezier(0.16, 1, 0.3, 1) 0s infinite alternate both;
}


easeInOutExpo

CSS
.ease_in_out_expo_box {
  animation: moved 2s cubic-bezier(0.87, 0, 0.13, 1) 0s infinite alternate both;
}

easeInCirc

CSS
.ease_in_circ_box {
  animation: moved 2s cubic-bezier(0.55, 0, 1, 0.45) 0s infinite alternate both;
}

easeOutCirc

CSS
.ease_out_circ_box {
  animation: moved 2s cubic-bezier(0, 0.55, 0.45, 1) 0s infinite alternate both;
}

easeInOutCirc

CSS
.ease_in_out_circ_box {
  animation: moved 2s cubic-bezier(0.85, 0, 0.15, 1) 0s infinite alternate both;
}

easeInBack

CSS
.ease_in_back_box {
  animation: moved 2s cubic-bezier(0.36, 0, 0.66, -0.56) 0s infinite alternate
    both;
}

easeOutBack

CSS
.ease_out_back_box {
  animation: moved 2s cubic-bezier(0.34, 1.56, 0.64, 1) 0s infinite alternate
    both;
}

easeInOutBack

CSS
.ease_in_out_back_box {
  animation: moved 2s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s infinite alternate
    both;
}

コメントを残す

メールアドレスが公開されることはありません。