Property Parameters

duration(時間)

アニメーションの長さをミリ秒単位で指定することができます。

anime({
  targets: '.duration-demo .el',
  translateX: 250,
  duration: 3000
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var duration = anime({
  targets: '#duration .el',
  translateX: 250,
  duration: 3000
});

HTML

<div id="duration">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

delay(開始遅延)

アニメーションの開始ディレイをミリ秒単位で指定することができます。

anime({
  targets: '.delay-demo .el',
  translateX: 250,
  delay: 1000
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var delay = anime({
  targets: '#delay .el',
  translateX: 250,
  delay: 1000
});

HTML

<div id="delay">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

endDelay(終了遅延)

アニメーションに終了ディレイをミリ秒単位で指定することができます。

anime({
  targets: '.end-delay-demo .el',
  translateX: 250,
  endDelay: 1000,
  direction: 'alternate'
});

デモ

要素をクリックするとアニメーションを開始します。
要素が右に移動して停止した後、1秒後に左に戻ります。

JavaScript

var delay = anime({
  targets: '#end-delay .el',
  translateX: 250,
  endDelay: 1000,
  direction: 'alternate'
});

HTML

<div id="delay">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

easing(イージング)

アニメーションのイージングを指定します。

利用可能なイージングとパラメータについてはEasingを参照してください。

anime({
  targets: '.easing-demo .el',
  translateX: 250,
  easing: 'easeInOutExpo'
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var easing = anime({
  targets: '#easing .el',
  translateX: 250,
  easing: 'easeInOutExpo'
});

HTML

<div id="easing">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

round(数値の丸め)

数値を小数点以下に丸める場合の端数桁数を指定します。
10の場合は0.1ずつ、4の場合は0.25ずつ増加します。

var roundLogEl = document.querySelector('.round-log');

anime({
  targets: roundLogEl,
  innerHTML: [0, 10000],
  easing: 'linear',
  round: 10 // 0.1ずつアニメーションします
});

デモ

要素をクリックするとアニメーションを開始します。

0

JavaScript

var easing = anime({
  targets: '#round pre',
  innerHTML: [0, 10000],
  easing: 'linear',
  round: 10
});

HTML

<div id="round">
  <pre class="count">0</pre>
</div>

CSS

pre {
  font-family: 'Consolas', monospace;
}

特定のプロパティ

オブジェクトを値として指定して、 アニメーションの各プロパティに特定のパラメータを指定することができます。 オブジェクトに指定していないプロパティは、 メインアニメーションから継承されます。

rotate: {
  value: 360,
  duration: 1800,
  easing: 'easeInOutSine'
}

anime({
  targets: '.specific-prop-params-demo .el',
  translateX: {
    value: 250,
    duration: 800
  },
  rotate: {
    value: 360,
    duration: 1800,
    easing: 'easeInOutSine'
  },
  scale: {
    value: 2,
    duration: 1600,
    delay: 800,
    easing: 'easeInOutQuart'
  },
  delay: 250 // 'scale'以外の全てのプロパティは250msのディレイを継承します。
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var specificPropertyParameters = anime({
  targets: '#specificPropertyParameters .el',
  translateX: {
    value: 250,
    duration: 800
  },
  rotate: {
    value: 360,
    duration: 1800,
    easing: 'easeInOutSine'
  },
  scale: {
    value: 2,
    duration: 1600,
    delay: 800,
    easing: 'easeInOutQuart'
  },
  delay: 250 // scaleを除く全てのプロパティに250ms遅延を継承させます。
});

HTML

<div id="specificPropertyParameters" style="margin: 2em 0;">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

関数指定パラメータ

アニメーションのターゲットとプロパティごとに異なる値を取得します。

関数は3つの引数を受け取ります。

パラメータを簡単に操作するためにStaggeringを参照してください。

anime({
  targets: '.function-based-params-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  delay: function(el, i, l) {
    return i * 100;
  },
  endDelay: function(el, i, l) {
    return (l - i) * 100;
  }
});

デモ

JavaScript

var functionBasedParams = anime({
  targets: '#functionBasedParams .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  delay: function(el, i, l) {
    return i * 100;
  },
  endDelay: function(el, i, l) {
    return (l - i) * 100;
  }
});

HTML

<div id="functionBasedParams">
  <div class="line">
    <div class="label">delay = 0 * 100</div>
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="label">delay = 1 * 100</div>
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="label">delay = 2 * 100</div>
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.label {
  position: absolute;
  opacity: .5;
  text-align: left;
  padding-top: 2px;
  line-height: 28px;
}