ja.yml

title: Easing Function 早見表
description:
  正しいEasingを使って、アニメーションをもっとリアルに
share:
  Easing Functionはアニメーションの進み具合を指定することで、アニメーションをよりリアルに見せることが出来ます。
  現実の物体は急に動き出して、一定のスピードで動くことなんて有り得ません。
  このページでは、そのEasingの選択をより簡単にすることを目的としています。

about: !!format
  ~Easing function~はアニメーションの進み具合を指定し、それをよりリアルに見せることが出来ます。

  現実の物体は急に動き出して一定のスピードで動くことなんて有り得ません。
  例えば、引き出しを開けるときは、最初は少し加速をつけて、そしてゆっくりにしていきます。
  何かが落ちるときを考えてみると、最初はだんだん速くなって落ちていき、地面にあたったときに跳ね返ってきます。

  ここでは、そのEasingを選ぶ際の早見表として役立ってくれればいいなぁと考えています。

easings:
  css: いつでも使用可能
  js: JavaScriptのみで使用可能

howtos:
  name: easing名
  curve: easingのベジェ曲線
  js: !!code
    jQueryと^jQuery Easing Plugin^の組み合わせが、一番簡単にEasingを持ったアニメーションを指定することができる方法です。
    `.animate`メソッドの第三引数、もしくは`easing`キーにeasingの名前を指定するだけです。
  scss: !!code
    Sass/SCSSもアニメーションの指定に一役買ってくれます。Compassを使えば、`transition`や`animation`の前のベンダープレフィックスを付ける必要も無いですし、^Compass Ceaser^プラグインを使えば、ベジェ曲線を使わずに、名前で指定することも可能になります。
  css: !!code
    CSSの`transition`と`animation`では、easing functionを指定することが出来ます。
  css_bad:
    残念ながら、CSSはまだ全てのeasingをサポートしている訳ではなく、関数も名前ではなくベジェ曲線で指定しなくてはいけません。
  css_help:
    Easingを選択することで、ベジェ曲線を表示できます。

easing:
  all_easings: 全てのeasing
  no_css: !!code
    残念ながら、CSSはこのeasingをサポートしていません。
    但し、JavaScript、もしくは特別なAnimation `@keyframes`で対応することは可能です。
  edit: cubic-bezier.com で ^編集する^

opensource:
  title: オープンソース
  translate: このサイトの^翻訳^を手伝ってください