Properties

CSS

任意のCSSプロパティをアニメーションすることができます。

ほとんどのCSSプロパティは、レイアウト変更や再描画が原因でぎくしゃくしたアニメーションになります。 できる限りopacityとCSS transformを優先させます。

指定可能な値についてはValuesを参照してください。

anime({
  targets: '.css-prop-demo .el',
  left: '240px',
  backgroundColor: '#FFF',
  borderRadius: ['0%', '50%'],
  easing: 'easeInOutQuad'
});

デモ

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

JavaScript

var cssProperties = anime({
  targets: '#cssProperties .el',
  opacity: .5,
  left: '240px',
  backgroundColor: '#AAA',
  borderRadius: ['0em', '2em'],
  easing: 'easeInOutQuad'
});

HTML

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

CSS transform

CSS transformを個別にアニメーションすることができます。

transformプロパティごとに別のタイミングを指定することができます。 詳しくは特定のプロパティを参照してください。

指定可能な値についてはValuesを参照してください。

anime({
  targets: '.css-transforms-demo .el',
  translateX: 250,
  scale: 2,
  rotate: '1turn'
});

デモ

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

JavaScript

var CSStransforms = anime({
  targets: '#CSStransforms .el',
  translateX: 250,
  scale: 2,
  rotate: '1turn'
});

HTML

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

オブジェクトプロパティ

数値を含んだ任意のオブジェクトプロパティをアニメーションすることができます。

指定可能な値についてはValuesを参照してください。

var objPropLogEl = document.querySelector('.js-object-log');

var myObject = {
  prop1: 0,
  prop2: '0%'
}

anime({
  targets: myObject,
  prop1: 50,
  prop2: '100%',
  easing: 'linear',
  round: 1,
  update: function() {
    objPropLogEl.innerHTML = JSON.stringify(myObject);
  }
});

デモ

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

{"prop1":0,"prop2":"0%"}

JavaScript

var myObject = {
  prop1: 0,
  prop2: '0%'
}
var JSobjectProp = anime({
  targets: myObject,
  prop1: 50,
  prop2: '100%',
  easing: 'linear',
  round: 1,
  update: function() {
    var el = document.querySelector('#JSobjectProp pre');
    el.innerHTML = JSON.stringify(myObject);
  }
});

HTML

<div id="JSobjectProp">
  <pre class="count">{"prop1":0,"prop2":"0%"}</pre>
</div>

CSS

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

DOM属性

数値を含んだ任意のDOMの属性をアニメーションすることができます。

指定可能な値についてはValuesを参照してください。

anime({
  targets: '.dom-attribute-demo input',
  value: [0, 1000],
  round: 1,
  easing: 'easeInOutExpo'
});

デモ

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

JavaScript

var domAttributes = anime({
  targets: '#domAttributes input',
  value: 1000,
  round: 1,
  easing: 'easeInOutExpo'
});

HTML

<div id="domAttributes">
  <input class="text-output" value="0">
</div>

CSS

.text-output {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  color: currentColor;
  text-align: center;
  background-color: transparent;
  border: 1px solid currentColor;
}

SVG属性

他のDOM属性と同じく、 数値を含んだ全てのSVGの属性をアニメーションすることができます。

指定可能な値についてはValuesとSVGを参照してください。

anime({
  targets: ['.svg-attributes-demo polygon', 'feTurbulence', 'feDisplacementMap'],
  points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
  baseFrequency: 0,
  scale: 1,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutExpo'
});

デモ

JavaScript

var svgAttributes = anime({
  targets: ['#svgAttributes polygon', 'feTurbulence', 'feDisplacementMap'],
  points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
  baseFrequency: 0,
  scale: 1,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutExpo'
});

HTML

<div id="svgAttributes">
  <svg width="128" height="128" viewBox="0 0 128 128">
    <filter id="displacementFilter">
      <feTurbulence type="turbulence" baseFrequency=".05" numOctaves="2" result="turbulence"></feTurbulence>
      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
    </filter>
    <polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100" style="filter: url(#displacementFilter)" fill="currentColor"></polygon>
  </svg>
</div>