Animation Parameters

再生方向

アニメーションの方向を指定します。

anime({
  targets: '.dir-normal',
  translateX: 250,
  easing: 'easeInOutSine'
});

anime({
  targets: '.dir-reverse',
  translateX: 250,
  direction: 'reverse',
  easing: 'easeInOutSine'
});

anime({
  targets: '.dir-alternate',
  translateX: 250,
  direction: 'alternate',
  easing: 'easeInOutSine'
});

デモ

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

JavaScript

var normal = anime({
  targets: '#direction .normal',
  translateX: 250,
  easing: 'easeInOutSine'
});

var reverse = anime({
  targets: '#direction .reverse',
  translateX: 250,
  direction: 'reverse',
  easing: 'easeInOutSine'
});

var alternate = anime({
  targets: '#direction .alternate',
  translateX: 250,
  direction: 'alternate',
  easing: 'easeInOutSine'
});

HTML

<div id="direction">
  <div class="line">
    <div class="label">normal</div>
    <div class="square shadow"></div>
    <div class="square normal"></div>
  </div>
  <div class="line">
    <div class="label">reverse</div>
    <div class="square shadow"></div>
    <div class="square reverse"></div>
  </div>
  <div class="line">
    <div class="label">alternate</div>
    <div class="square shadow"></div>
    <div class="square alternate"></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-left: 38px;
  line-height: 28px;
}

ループ

アニメーションの繰り返し回数を指定します。

anime({
  targets: '.loop',
  translateX: 270,
  loop: 3,
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-infinity',
  translateX: 270,
  loop: true,
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-reverse',
  translateX: 270,
  loop: 3,
  direction: 'reverse',
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-reverse-infinity',
  translateX: 270,
  direction: 'reverse',
  loop: true,
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-alternate',
  translateX: 270,
  loop: 3,
  direction: 'alternate',
  easing: 'easeInOutSine'
});

anime({
  targets: '.loop-alternate-infinity',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine'
});

デモ

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

JavaScript

var loop = anime({
  targets: '.loop',
  translateX: 270,
  loop: 3,
  easing: 'easeInOutSine'
});

var loopInfinity = anime({
  targets: '.loop-infinity',
  translateX: 270,
  loop: true,
  easing: 'easeInOutSine'
});

var loopReverse = anime({
  targets: '.loop-reverse',
  translateX: 270,
  loop: 3,
  direction: 'reverse',
  easing: 'easeInOutSine'
});

var loopReverseInfinity = anime({
  targets: '.loop-reverse-infinity',
  translateX: 270,
  direction: 'reverse',
  loop: true,
  easing: 'easeInOutSine'
});

var loopAlternate = anime({
  targets: '.loop-alternate',
  translateX: 270,
  loop: 3,
  direction: 'alternate',
  easing: 'easeInOutSine'
});

var loopAlternateInfinity = anime({
  targets: '.loop-alternate-infinity',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine'
});

HTML

<div id="loop">
  <div class="line">
    <div class="label">normal 3回</div>
    <div class="square shadow"></div>
    <div class="square loop"></div>
  </div>
  <div class="line">
    <div class="label">reverse 3回</div>
    <div class="square shadow"></div>
    <div class="square loop-reverse"></div>
  </div>
  <div class="line">
    <div class="label">alternate 3回</div>
    <div class="square shadow"></div>
    <div class="square loop-alternate"></div>
  </div>
  <div class="line">
    <div class="label">normal 無限</div>
    <div class="square shadow"></div>
    <div class="square loop-infinity"></div>
  </div>
  <div class="line">
    <div class="label">reverse 無限</div>
    <div class="square shadow"></div>
    <div class="square loop-reverse-infinity"></div>
  </div>
  <div class="line">
    <div class="label">alternate 無限</div>
    <div class="square shadow"></div>
    <div class="square loop-alternate-infinity"></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-left: 38px;
  line-height: 28px;
}

自動再生

アニメーションを自動再生するかどうかを指定します。

anime({
  targets: '.autoplay-true',
  translateX: 250,
  autoplay: true,
  easing: 'easeInOutSine'
});

anime({
  targets: '.autoplay-false',
  translateX: 250,
  autoplay: false,
  easing: 'easeInOutSine'
});

デモ

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

JavaScript

var autoplayTrue = anime({
  targets: '.autoplay-true',
  translateX: 250,
  autoplay: true,
  easing: 'easeInOutSine'
});

var autoplayFalse = anime({
  targets: '.autoplay-false',
  translateX: 250,
  autoplay: true,
  easing: 'easeInOutSine'
});

HTML

<div id="autoplay">
  <div class="line">
    <div class="label">autoplay: true</div>
    <div class="square shadow"></div>
    <div class="square autoplay-true"></div>
  </div>
  <div class="line">
    <div class="label">autoplay: false</div>
    <div class="square shadow"></div>
    <div class="square autoplay-false"></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-left: 38px;
  line-height: 28px;
}