Values

単位無指定

元の値に単位があれば、アニメーションの値に自動的に単位を追加します。

anime({
  targets: '.unitless-values-demo .el',
  translateX: 250, // -> '250px'
  rotate: 540 // -> '540deg'
});

デモ

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

JavaScript

var unitlessValue = anime({
  targets: '#unitlessValue .el',
  translateX: 250, // -> '250px'
  rotate: 540 // -> '540deg'
});

HTML

<div id="unitlessValue">
  <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;
}

単位指定

アニメーションに指定した単位を使用し、 ターゲットの初期値を自動変換します。

変換精度は使用する単位によって異なります。 配列を使用し、アニメーションの初期値を直接定義することもできます。 詳しくは初期値指定を参照してください。

anime({
  targets: '.specific-unit-values-demo .el',
  width: '100%', // -> from '28px' to '100%',
  easing: 'easeInOutQuad',
  direction: 'alternate',
  loop: true
});

デモ

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

JavaScript

var specificUnitValue = anime({
  targets: '#specificUnitValue .el',
  width: '100%', // -> from '28px' to '100%',
  easing: 'easeInOutQuad',
  direction: 'alternate',
  loop: true
});

HTML

<div class="demo" id="specificUnitValue">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.demo {
  width: 290px;
  position:relative;
}

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

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

相対値

元の値を加算、減算、乗算します。

var relativeEl = document.querySelector('.el.relative-values');
relativeEl.style.transform = 'translateX(100px)';

anime({
  targets: '.el.relative-values',
  translateX: {
    value: '*=2.5', // 100px * 2.5 = '250px'
    duration: 1000
  },
  width: {
    value: '-=20px', // 28 - 20 = '8px'
    duration: 1800,
    easing: 'easeInOutSine'
  },
  rotate: {
    value: '+=2turn', // 0 * 2 = '2turn'
    duration: 1800,
    easing: 'easeInOutSine'
  },
  direction: 'alternate'
});

デモ

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

JavaScript

var relativeEl = document.querySelector('#relativeValues .el');
relativeEl.style.transform = 'translateX(100px)';
var relativeValues = anime({
  targets: '#relativeValues .el',
  translateX: {
    value: '*=2.5', // 100px * 2.5 = '250px'
    duration: 1000
  },
  width: {
    value: '-=20px', // 28 - 20 = '8px'
    duration: 1800,
    easing: 'easeInOutSine'
  },
  rotate: {
    value: '+=2turn', // 0 * 2 = '2turn'
    duration: 1800,
    easing: 'easeInOutSine'
  },
  direction: 'alternate'
});

HTML

<div id="relativeValues" style="height: 120px">
  <div class="circle shadow"></div>
  <div class="circle el"></div>
</div>

CSS

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

.circle {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
  border-radius: 50%;
}

カラー

anime.jsは16進トリプレット、RGB、RGBA、HSL、HSLAのカラー値を指定することができます。

CSSカラーコード(例えば'red'、'yellow'、'aqua'等)はサポートしていません。

var colorsExamples = anime.timeline({
  endDelay: 1000,
  easing: 'easeInOutQuad',
  direction: 'alternate',
  loop: true
})
.add({ targets: '.color-hex',  background: '#FFF' }, 0)
.add({ targets: '.color-rgb',  background: 'rgb(255,255,255)' }, 0)
.add({ targets: '.color-hsl',  background: 'hsl(0, 100%, 100%)' }, 0)
.add({ targets: '.color-rgba', background: 'rgba(255,255,255, .2)' }, 0)
.add({ targets: '.color-hsla', background: 'hsla(0, 100%, 100%, .2)' }, 0)
.add({ targets: '.colors-demo .el', translateX: 270 }, 0);

デモ

JavaScript

var colors = anime.timeline({
  endDelay: 1000,
  easing: 'easeInOutQuad',
  direction: 'alternate',
  loop: true
})
.add({ targets: '#colors .color-hex',  background: '#CCC' }, 0)
.add({ targets: '#colors .color-rgb',  background: 'rgb(204,204,204)' }, 0)
.add({ targets: '#colors .color-hsl',  background: 'hsl(0, 0%, 80%)' }, 0)
.add({ targets: '#colors .color-rgba', background: 'rgba(204,204,204, .5)' }, 0)
.add({ targets: '#colors .color-hsla', background: 'hsla(0, 0%, 80%, .5)' }, 0)
.add({ targets: '#colors .el', translateX: 270 }, 0);

HTML

<div id="colors">
  <div class="label small">HEX</div>
  <div class="circle small shadow"></div>
  <div class="circle small el color-hex"></div>
  <div class="label small">RGB</div>
  <div class="circle small shadow"></div>
  <div class="circle small el color-rgb"></div>
  <div class="label small">RGBA</div>
  <div class="circle small shadow"></div>
  <div class="circle small el color-rgba"></div>
  <div class="label small">HSL</div>
  <div class="circle small shadow"></div>
  <div class="circle small el color-hsl"></div>
  <div class="label small">HSLA</div>
  <div class="circle small shadow"></div>
  <div class="circle small el color-hsla"></div>
</div>

CSS

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

.circle {
  pointer-events: none;
  margin: 1px;
  font-size: 12px;
  border-radius: 50%;
}

.small {
  width: 18px;
  height: 18px;
}

.label {
  position: absolute;
  opacity: .5;
  text-align: left;
  padding-left: 38px;
}

.label.small {
  line-height: 20px;
}

初期値指定

特定の値からアニメーションを開始することができます。

anime({
  targets: '.el.from-to-values',
  translateX: [100, 250], // from 100 to 250
  delay: 500,
  direction: 'alternate',
  loop: true
});

デモ

JavaScript

var specificInitialValue = anime({
  targets: '#specificInitialValue .el',
  translateX: [100, 250],
  delay: 500,
  direction: 'alternate',
  loop: true
});

HTML

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

CSS

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

.circle {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
  border-radius: 50%;
}

関数ベース値

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

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

anime({
  targets: '.function-based-values-demo .el',
  translateX: function(el) {
    return el.getAttribute('data-x');
  },
  translateY: function(el, i) {
    return 50 + (-50 * i);
  },
  scale: function(el, i, l) {
    return (l - i) + .25;
  },
  rotate: function() { return anime.random(-360, 360); },
  borderRadius: function() { return ['50%', anime.random(10, 35) + '%']; },
  duration: function() { return anime.random(1200, 1800); },
  delay: function() { return anime.random(0, 400); },
  direction: 'alternate',
  loop: true
});

デモ

JavaScript

var functionBasedPropVal = anime({
  targets: '#functionBasedPropVal .el',
  translateX: function(el) {
    return el.getAttribute('data-x');
  },
  translateY: function(el, i) {
    return 50 + (-50 * i);
  },
  scale: function(el, i, l) {
    return (l - i) + .25;
  },
  rotate: function() { return anime.random(-360, 360); },
  borderRadius: function() { return ['50%', anime.random(10, 35) + '%']; },
  duration: function() { return anime.random(1200, 1800); },
  duration: function() { return anime.random(800, 1600); },
  delay: function() { return anime.random(0, 1000); },
  direction: 'alternate',
  loop: true
});

HTML

<div id="functionBasedPropVal">
  <div class="line">
    <div class="square small shadow"></div>
    <div class="square small el" data-x="160"></div>
  </div>
  <div class="line">
    <div class="square small shadow"></div>
    <div class="square small el" data-x="80"></div>
  </div>
  <div class="line">
    <div class="square small shadow"></div>
    <div class="square small el" data-x="250"></div>
  </div>
</div>

CSS

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

.circle {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
  border-radius: 50%;
}

.small {
  width: 18px;
  height: 18px;
}